La mise en page Flex peut nous aider à disposer rapidement certains blocs pour obtenir l'effet souhaité, sans avoir à vous soucier du flottement, de la position, etc. Lorsque nous mettons en page des pages Web, nous utilisons souvent des mises en page spéciales, et flex peut nous aider rapidement. mise en page, pas besoin de positionner.
N'importe quelle boîte peut être désignée comme mise en page flexible, mais veuillez noter qu'après avoir défini la mise en page Flex, les attributs float, clear et vertical-align des éléments enfants seront invalide.
Jetons un coup d'œil aux exemples que nous rencontrons souvent sur notre site Web : Nous souhaitons centrer les images et le texte et les attacher à la mise en page inférieure. L'expérience passée a montré que le conteneur parent définit text-align:center, mais la direction verticale est très lourde,
soit définissez padding-top sur le conteneur parent,
, soit définissez margin-top sur l'image
; ;
mais faites attention :Bien que vous puissiez le faire avec ce paramètre, si vous changez l'image et que la taille est incohérente, haha, pleurez simplement
À ce moment-là, vous apparaîtez. il suffit de le définir dans le
conteneur parent {
display: flex; flex-direction:column;//让子元素纵向布局 justify-content:flex-end;//子元素垂直方向布局，依次向下 align-items: center;//让子元素水平方向居中
}
De même, si vous le centrez verticalement, il vous suffit de
justify-content:center;垂直方向居中
如果是想要图片居顶部,文字居底部;justify-content: space-between;//两端对齐
Il s'agit de la disposition courante de haut en bas.
justify-content有下面几个属性
flex-start (valeur par défaut) :
flex-direction:column时候为上对齐
flex-direction:row为左对齐
flex-end : De même, la colonne est alignée ci-dessous et la rangée est alignée à droite
center : Centrée
space-between : Alignez les deux extrémités, avec un espacement égal entre les éléments.
space-around : Chaque article est également espacé des deux côtés. Par conséquent, l’espace entre les éléments est deux fois plus grand que l’espace entre les éléments et la bordure.
C'est encore plus simple. Si vous êtes intéressé par le flex, vous pouvez l'essayer vous-même. Divers attributs,
Les 6 attributs suivants sont définis sur le conteneur. 
flex-direction
- flex-wrap
- flex-flow
- justifier le contenu
- aligner les éléments
- aligner le contenu
- L'attribut flex-direction
détermine la direction de l'axe principal (c'est-à-dire la direction de la disposition des éléments).
flex-direction
Il peut avoir 4 valeurs.(valeur par défaut) : L'axe principal est horizontal et le point de départ est à l'extrémité gauche..box { flex-direction: row | row-reverse | column | column-reverse;}Copier après la connexion
l'inversion des colonnes est l'inversion verticale order
row: L'axe principal est horizontal et le point de départ est à l'extrémité droite.
row-reverse: L'axe principal est vertical et le point de départ est sur le bord supérieur.
column: L'axe principal est vertical et le point de départ est au bord inférieur.- ligne-inverse est l'ordre horizontal inversé ;
column-reverseles lignes et les colonnes sont illustrées ci-dessus, c'est-à-dire que l'ordre
attribut flex-wrap
Par défaut, les éléments sont disposés le long d'une ligne (également appelée un "axe"). 
Définition de l'attribut, si une ligne d'axe ne peut pas être disposée, comment envelopper la ligne. L'attribut
est la forme abrégée de l'attribut flex-wrap et de l'attribut
..box{ flex-wrap: nowrap | wrap | wrap-reverse;}Copier après la connexion
flex-flowflex-directionl'attribut align-itemsflex-wraprow nowrap
align-items consiste à modifier la relation de position dans la direction verticale ;justify-content est la relation de position changeante dans la direction horizontale.box { flex-flow: <flex-direction> || <flex-wrap>;}Copier après la connexion
align-items:其实跟justify-content属性差不多,如果在没有指定flex-direction;的时候 Cela peut prendre 5 valeurs. L'alignement spécifique est lié à la direction de l'axe transversal. On suppose ci-dessous que l'axe transversal va de haut en bas.
: Le point de départ de l'axe transversal est aligné..box { align-items: flex-start | flex-end | center | baseline | stretch;}Copier après la connexion
: Le point final de l'axe transversal est aligné.
: Le milieu de l'axe transversal est aligné.
flex-start: L'alignement de base de la première ligne de texte de l'élément.
flex-end
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
align-content:center;就是让这三排盒子垂直方向居中
如果你设置为align-item:content;就没有让三个盒子一起垂直居中的效果了
.box { align-content: flex-start | flex-end | center | space-between | space-around | stretch;}
下面讲一点flex应用在子集元素上
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
.item { flex-grow: <number>; /* default 0 */}Copier après la connexion
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
如果给所有子集都设置flex-grow:1;将会成右边图,平分宽度;同理也可以平分高度;
例如给第三个盒子设置flex-grow:2,效果如下,第三个盒子分的宽度为其他的2倍
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
.item { flex-basis: <length> | auto; /* default auto */}Copier après la connexion
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
其实这个跟flex-grow差不多,区别就在于可以单独设置其中某一个盒子的占比(长度或者宽度)
给第三个盒子设置flex-basis:100px;
给第九个盒子设置flex-basis:200px
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
.item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}Copier après la connexion
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch;}Copier après la connexion
该属性可能取6个值，除了auto，其他都与align-items属性完全一致。
第三个盒子align-self:flex-end;
第五个盒子align-self;stretch;
第九个盒子align-self:flex-start;
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
