Exemple d'explication de la disposition flexible

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.

.box {  flex-direction: row | row-reverse | column | column-reverse;}

(valeur par défaut) : L'axe principal est horizontal et le point de départ est à l'extrémité gauche.

• 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.

• column-reverseles lignes et les colonnes sont illustrées ci-dessus, c'est-à-dire que l'ordre

ligne-inverse est l'ordre horizontal inversé ;                                                                                                                                             

l'inversion des colonnes est l'inversion verticale order

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

flex-flow

est la forme abrégée de l'attribut flex-wrap et de l'attribut

, et la valeur par défaut est

.

.box{  flex-wrap: nowrap | wrap | wrap-reverse;}

flex-flowflex-directionl'attribut align-itemsflex-wraprow nowrap

.box {  flex-flow: <flex-direction> || <flex-wrap>;}

align-items consiste à modifier la relation de position dans la direction verticale ;justify-content est la relation de position changeante dans la direction horizontale

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.

.box {  align-items: flex-start | flex-end | center | baseline | stretch;}

 : Le point de départ de l'axe transversal est aligné.

 : Le point final de l'axe transversal est aligné.

• flex-start

   : Le milieu de l'axe transversal est aligné.

• flex-end

   : L'alignement de base de la première ligne de texte de l'élément.

• stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

 

align-content属性

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

 align-content:center;就是让这三排盒子垂直方向居中                         

   如果你设置为align-item:content;就没有让三个盒子一起垂直居中的效果了

 

.box {  align-content: flex-start | flex-end | center | space-between | space-around | stretch;}

 

下面讲一点flex应用在子集元素上

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

.item {  flex-grow: <number>; /* default 0 */}

 

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

 如果给所有子集都设置flex-grow:1;将会成右边图,平分宽度;同理也可以平分高度;

例如给第三个盒子设置flex-grow:2,效果如下,第三个盒子分的宽度为其他的2倍

 

 

 

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {  flex-basis: <length> | auto; /* default auto */}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

其实这个跟flex-grow差不多,区别就在于可以单独设置其中某一个盒子的占比(长度或者宽度)

给第三个盒子设置flex-basis:100px;

给第九个盒子设置flex-basis:200px

 

 

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

.item {  flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

 

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item {  align-self: auto | flex-start | flex-end | center | baseline | stretch;}

该属性可能取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!