Comment utiliser la disposition des boîtes flexibles en CSS3

Tout d'abord, apprenons quelque chose sur les noms dans la boîte flexible

Comme le montre la figure, la boîte flexible est divisée en deux axes, l'un est l'axe principal et l'autre est l'axe transversal, la direction de l'axe principal peut être modifiée (de gauche à droite vers le haut et le bas). Une fois la direction de l'axe principal modifiée, la direction de l'axe transversal changera également en conséquence

Ensuite, Jetons un coup d'œil au support général du navigateur

Comme le montre l'image, le support d'IE pour les boîtes flexibles peut être considéré comme incroyable. Les autres navigateurs sont corrects. aux pièges d'IE, je sens que je peux abandonner ce schéma de mise en page sur PC, mais côté mobile, il est supporté depuis Android 2.1 (une écriture compatible est requise), il peut donc toujours être utilisé côté mobile. , mais il ne faut pas oublier le préfixe.

Jetons un coup d'œil à quelques façons d'écrire la boîte flexible

Ouvrez la boîte flexible

display: flex;

兼容写法（IE10下版本不支持这属性）

display:-webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

Définir la disposition des sous-éléments (direction de l'axe principal)

flex-direction: row;
row：水平方向从左到右(默认)
row-reverse：主轴从右到左
column：主轴从上到下
column-reverse：主轴从下到上

Compatible La formule

-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-moz-box-orient:vertical;
-moz-box-direction:normal;
flex-direction:column;

définit le retour à la ligne des sous-éléments

flex-wrap：设置当前容器尺寸不足的情况下，项目是否换行显示。默认不可以换行显示。
nowarp：项目不换行显示（默认）
warp：项目换行显示，但是在第一行项目的下边。
warp-reverse：项目换行显示，但是在第一行项目的上边

Écriture compatible

-webkit-flex-wrap:wrap;
-webkit-box-lines:multiple;
-moz-flex-wrap:wrap;
flex-wrap:wrap;

Il s'agit d'une combinaison des deux attributs ci-dessus

flex-flow: row nowrap;

Écriture compatible

-webkit-flex-flow:row wrap;
-webkit-box-orient:horizontal;
-webkit-box-lines:multiple;
-moz-flex-flow:row wrap;
box-orient:horizontal;
box-lines:multiple;
flex-flow:row wrap;

Mise en page horizontale

flex-start：主轴起始位置对齐
flex-end：主轴结束位置对齐
center：主轴居中对齐
space-between：主轴方向两端对齐，项目之间存在相等的间隔
space-around：主轴方向上的项目左右两端都有间隔，因此两端的项目间隔比中间的项目间隔小一半
justify-content:space-around;

Écriture compatible (IE11 ne prend pas en charge cet attribut, les autres navigateurs doivent ajouter un préfixe)

-webkit-justify-content:center;
justify-content:center;
-moz-box-pack:center;
-webkit--moz-box-pack:center;
box-pack:center;

Disposition disposée verticalement

flex-start：设置标签交叉轴的起始点对齐
flex-end：设置标签交叉轴的结束点对齐
center：设置标签交叉轴居中对齐
baseline：设置项目中第一行文本的基线对齐
stretch：设置项目的高度占满整个容器的高度（前提：项目的高度未指定）
align-items: baseline;

Écriture compatible

align-items:center;
-webkit-align-items:center;
box-align:center;
-moz-box-align:center;
-webkit-box-align:center;

Disposition des boîtes télescopiques

flex:num;

Écriture compatible

box-flex:num;
-webkit-box-flex:num;
-moz-box-flex:num;
flex:num;
-webkit-flex:num;

Ordre d'apparition des éléments

<span   style="max-width:90%">order:num;<br/></span>

兼容写法

box-order:num;
-webkit-box-order:num;
-moz-box-order:num;
order:num;
-webkit-order:num;

D'accord, ce sont les attributs couramment utilisés. En fait, il existe d'autres attributs que je ne mentionnerai pas ici.

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!