Disposition de la boîte télescopique CSS (partage du résumé)

Cet article vous apporte des connaissances pertinentes sur css, qui introduit principalement des problèmes liés à la disposition des boîtes télescopiques CSS. Si un élément définit l'attribut CSS display:flex ou display:inline-flex, l'élément deviendra Jetons un coup d'œil au. conteneur évolutif. J’espère qu’il sera utile à tout le monde. ： (Partage vidéo d'apprentissage : 视Tutoriels vidéo CSS

,

Tutoriel vidéo HTML )

disposition de la boîte télescopique

1 conteneur télescopique et projet télescopique

conteneur télescopique :

un ensemble d'éléments attribut CSS , le L'élément devient un conteneur flexible.

Éléments flexibles : Les éléments enfants du conteneur flex sont les éléments flex. display:flex 或者 display:inline-flex

Caractéristiques des projets flex :

Les projets flex seront disposés horizontalement dans le conteneur flex par défaut.

Le projet évolutif peut définir la largeur, la hauteur, les marges intérieures et extérieures, et il n'y aura pas d'effondrement des marges. Il ne se détachera pas du flux de documents et est évolutif.

Un élément peut être à la fois un élément flexible et un conteneur flexible.

2. 2 Définissez la direction de l'axe principal et la méthode de retour à la ligne

Axe principal :

Les éléments flexibles sont disposés le long de l'axe principal. La direction par défaut de l'axe principal est de gauche à droite.

Axe latéral :

L'axe perpendiculaire à l'axe principal est appelé axe latéral, et la direction de l'axe latéral change avec la direction de l'axe principal.

Définissez la direction de l'axe principal

Donnez la propriété CSS

flex-direction

au conteneur flex pour définir la direction de l'axe principal, la valeur est la suivante :

row				水平从左到右，默认值
row-reverse		水平从右到左
column			垂直从上到下
column-reverse	垂直从下到上

Définissez la méthode de retour à la ligne

Donner la propriété CSS du conteneur flex

flex-wrap

pour le définir La méthode de retour à la ligne des éléments flexibles dans la direction de l'axe principal La valeur de l'attribut est la suivante :

nowrap			默认值，不换行
wrap			自动换行
wrap-reverse	自动换行，行翻转

Définissez la direction de l'axe principal et la méthode de retour à la ligne au niveau. same time

flex-flow

est un attribut composite de flex-directrion et flex-wrap, et l'axe principal peut être défini en même temps dans la direction et les sauts de ligne.

flex-flow

peut définir 1 valeur ou 2 valeurs (il n'y a pas d'exigence d'ordre entre les deux valeurs).

3 Définissez l'alignement des éléments flexibles sur l'axe principal

Définissez l'attribut

justify-content

sur le conteneur flex Vous pouvez définir l'alignement des éléments flexibles sur l'axe principal La valeur de l'attribut. est la suivante :

flex-start			默认值，主轴起始对齐
flex-end			主轴结束对齐
center				居中
space-between		两端没有空隙，中间有空隙
space-around		两端空隙是中间空隙的一半
space-enenly		两端空隙与中间空隙相等

4 Définir le flex L'alignement des éléments sur l'axe latéral

Une ligne d'axe principal (les éléments flexibles ne s'enroulent pas sur l'axe principal)

Définir l'attribut

align-items

au conteneur flexible. La valeur de l'attribut est la suivante :

stretch			默认值，伸缩项目在侧轴方向的长度（高度）在侧轴方向拉伸（不设置在侧轴方向的长度，才会生效）
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
baseline		文本基线对齐

Éléments multiples Ligne de l'axe principal (les éléments flexibles s'enroulent sur l'axe principal)

Définissez l'attribut

align-content

pour une mise à l'échelle facile. suit :

strecch			默认值
flex-start		侧轴起点对齐
flex-end		侧轴终点对齐
center			居中对齐
space-between	两端没有空隙，中间有空隙
space-around	两端空隙是中间空隙的一半
space-enenly	两端空隙与中间空隙相等

Résumé :

align-content est en fait défini sur Comment aligner plusieurs broches. La propriété

align-items fonctionnera quel que soit un ou plusieurs axes principaux, mais align-content ne fonctionne que pour plusieurs axes principaux ;

1. 5 Flexibilité de l'élément flexible

La longueur de base de l'élément flexible sur l'axe principal flex-basis

flex-basis Spécifier la longueur peut définir la longueur de l'élément flexible sur l'axe principal .

Si la base flexible n'est pas définie, la longueur de l'élément flexible sur l'axe principal dépend de la largeur ou de la hauteur définie.

Rapport d'expansion flex-grow

Spécifie un nombre pour représenter le taux d'expansion. La valeur par défaut de cette propriété est 0.

La condition préalable à l'expansion du projet télescopique : Le conteneur télescopique a une longueur suffisante vers le haut dans la direction de l'axe principal. Lorsqu'un projet évolutif est étendu, seul le taux d'expansion du projet évolutif est pris en compte.

Shrink ratio flex-shrink

Spécifie le nombre représentant le taux de retrait. La valeur par défaut de cette propriété est 1.

La condition préalable au retrait du projet télescopique : La longueur du conteneur télescopique est insuffisante dans la direction de l'axe principal. Lors du rétrécissement d'un article télescopique, vous devez tenir compte à la fois du taux de rétrécissement et de la longueur originale de l'article rétractable sur l'axe principal.

Attribut composite flexible

Définissez le taux d'expansion, le taux de contraction et la longueur de la base de la broche en même temps. Les règles de réglage sont les suivantes :

flex: grow shrink basis;flex: 0 1 auto;   /* 扩展比率是0，收缩比率是1，基准值是auto */

flex: 1;      /* flex: 1 1 0; */flex: auto;   /* flex: 1 1 auto; */flex: none;   /* flex: 0 0 auto    不伸不缩*/flex: 0 auto; /* flex: 0 1 auto */

6 Tri flexible des projets

Utilisez l'attribut order pour définir. le tri des projets flexibles. La valeur est un nombre. Plus la valeur est petite, plus elle est triée. Elle peut être une valeur négative. La valeur par défaut est 0.

order: 1;

7 Définissez individuellement l'alignement de l'élément flexible sur l'axe transversal

Définissez les attributs de l'élément flexible

align-self

Vous pouvez définir l'alignement de l'élément flexible sur l'axe transversal individuellement, la valeur du L'attribut est le même que align-items cohérent.

8 Configurer le conteneur flex

flex  : conteneur évolutif au niveau du bloc. **inline-flex :** Conteneur flexible en ligne.

flex-directionDéfinissez la direction de l'axe principal Par défaut, horizontalement de gauche à droite. row-reverse : horizontalement de droite à gauche. verticalement de haut en bas. Définissez la méthode de retour à la ligne Valeur par défaut, pas de retour à la ligne. wrap : valeurs flex-dierection et flex-wrap centre : Alignement central. Pas d'espace aux deux extrémités, mais un espace au milieu. **espace uniformément :**Les espaces aux deux extrémités sont cohérents avec l'espace au milieu. align-itemsDéfinissez l'alignement des éléments flexibles sur l'axe transversal (s'applique à un axe principal) **espace autour :** L'espace aux deux extrémités est la moitié de l'espace au milieu. **espace uniformément :**Les espaces aux deux extrémités sont cohérents avec l'espace au milieu. taux d'expansion

		row :
colonne :	**column-reverse :** Vertical de bas en haut	flex-wrap
nowrap:		Enroulement automatique de la ligne. wrap-reverse : Enroule et retourne automatiquement les lignes. flex-flow Définissez simultanément la direction de l'axe principal et la méthode de retour à la ligne
	justify-content	Définissez l'alignement des éléments flexibles sur l'axe principal flex- start : Alignez le point de départ de la broche. flex-end : Alignement du point final de la broche.
espace-entre :	**espace autour :** L'espace aux deux extrémités est la moitié de l'espace au milieu.
		stretch : Valeur par défaut, étirez-vous sur l'axe transversal. flex-start : Le point de départ de l'axe transversal est aligné. flex-end : Alignement du point final de l'axe transversal. centre : Alignement central. baseline : Alignement de la ligne de base.
align-content	Définissez l'alignement des éléments flexibles sur l'axe transversal (applicable à plusieurs axes principaux)	stretch : Valeur par défaut, étirez-vous sur l'axe transversal. flex-start : Le point de départ de l'axe transversal est aligné. flex-end : Alignement du point final de l'axe transversal. centre : Alignement central. espace-entre : Pas d'espace aux deux extrémités, mais un espace au milieu.
		Attributs définis pour flex items Nom de la propriété CSS signification valeur flex-grow

Nombre, la valeur par défaut est 0

flex-shrinkRapport de rétrécissementLa longueur de base sur l'axe principalSpécifiez la longueur, la valeur par défaut est autobase de rétrécissement de croissancenuméro, la valeur par défaut est 0**auto:**Valeur par défaut, selon les paramètres du conteneur de mise à l'échelle. Valeur par défaut, s'étire sur l'axe transversal. flex-start : flex-end : Alignement du point final de l'axe transversal. centre : Alignement de la ligne de base.

示例如下：

CSS3 弹性盒（Flexible Box 或 flexbox ），是一种当页面需要适应不同的屏幕大 小以及设备类型时确保元素拥有恰当的行为的布局方式。

        引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素 进行排列、对齐和分配空白空间。

        容器  使用弹性盒布局的父元素 display:flex;

本质：给父盒子添加flex属性，来控制子盒子的位置和排列方式。

       主轴：Flex容器的主轴主要用来配置Flex项目。他不一定是水平的，这主要取决于fle-direction属性。

　　侧轴：与主轴垂直的轴称作侧轴，是侧轴方向的延伸。

Flex父容器属性

要改变元素的模式为伸缩容器，需要使用display属性。

display:flex | inline-flex

flex:设置为块级伸缩容器。

inline-flex:设置为内联级伸缩容器。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        div>div{
            width:100px;
            height:100px;
            line-height:100px;
            border:1px solid;
            text-align:center;
            margin:10px;
        }
        #box{
            display:flex;     
            border:1px solid;
            margin:20px;
        }
        #inline{            
            display:inline-flex;
            border:1px solid;
            margin:20px;
        }
    </style>
    </head>
    <body>
    <div id="box">
        <div>A</div><div>B</div><div>C</div><div>D</div>
    </div>
    <div id="inline">
        <div>A</div><div>B</div><div>c</div><div>D</div>
    </div>
    </body>
    </html>

输出结果：

       块级伸缩容器与内联级伸缩容器类似，默认都是从左往右排列，唯一不同的是块级伸缩容器独占一行，而内联级伸缩容器随着内容改变。

　　Flex容器不是块容器，因此有些设计用来控制块布局的属性在伸缩布局中不适用。浮动无法影响伸缩容器，而且伸缩容器的margin与其内容的margin不会重叠。如果内联伸缩容器设置了浮动，元素将会以块级伸缩容器显示。

（学习视频分享：css视频教程、html视频教程）

Nombre, la valeur par défaut est 1		flex-basis
	flex	Attribut composite, lors de la définition de la base de rétrécissement de croissance
	ordre	le tri des éléments télescopiques
	align-self	définir l'alignement de les éléments télescopiques sur l'axe transversal séparément
stretch :		Le point de départ de l'axe transversal est aligné.
	Alignement central.	baseline :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!