Une brève introduction à la disposition Flex de l'attribut d'affichage en CSS3

Cet article vous apporte une brève introduction à la disposition Flex de l'attribut d'affichage en CSS3. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Récemment, j'apprends l'applet WeChat Lors de la conception de la mise en page de la page d'accueil, je suis tombé sur une nouvelle méthode de mise en page display:flex

 .container {
   display: flex;
   flex-direction: column;
   align-items: center;
   background-color: #b3d4db;
 }

L'effet après compilation est très évident, et la disposition de l’interface est également logique et semble claire. Alors à quoi sert cet attribut ?

　Flex est l'abréviation de Flexible Box, qui signifie « disposition flexible » et est utilisée pour offrir une flexibilité maximale pour les modèles en forme de boîte. Une fois que est défini sur la disposition Flex, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.

Il peut être appliqué à des conteneurs ou à des éléments en ligne. (La description ci-dessus est combinée avec la description de l'outil de développement WeChat) En 2009, le W3C a proposé une nouvelle solution : la mise en page Flex, qui peut implémenter diverses mises en page de manière simple, complète et réactive. Actuellement, il est pris en charge par tous les navigateurs, ce qui signifie que vous pouvez désormais utiliser cette fonctionnalité en toute sécurité.

Concepts de base

Les éléments qui utilisent la disposition Flex sont appelés conteneurs Flex (conteneurs flexibles), ou « conteneurs » en abrégé. Tous ses éléments enfants deviennent automatiquement des membres de conteneur, appelés éléments Flex (éléments flexibles), appelés « éléments ». Le conteneur a deux axes par défaut : l'axe principal horizontal et l'axe transversal vertical. La position de départ de l'axe principal (l'intersection avec la bordure) est appelée main start, et la position finale est appelée main end ; la position de départ de l'axe transversal est appelée cross start, et la position finale est appelée < ; 🎜>. Les éléments sont disposés le long de l’axe principal par défaut. L'espace de l'axe principal occupé par un seul élément est appelé cross end, et l'espace de l'axe transversal occupé est appelé main size. cross size

flex-direction

1 .box { 2 flex-direction : rangée | colonne-inverse | La plage de valeurs facultative de l'attribut est la ligne (par défaut) disposée de gauche à droite le long de l'axe principal horizontal, la ligne inversée disposée de droite à gauche le long de l'axe principal horizontal, la colonne de haut en bas à droite l'axe principal vertical et l'inverse de la colonne.

1 .box{ 2 flex-wrap: nowrap | wrap-reverse 3 } La plage de valeurs facultative de l'attribut est nowrap ( par défaut) pas de saut de ligne, saut de ligne wrap (la première ligne est en haut) et wrap-reverse (vous savez ~)

1 . box { 2 flex -flow: || 3 }

Dans l'attribut d'écriture, connectez simplement les valeurs des deux méthodes ci-dessus avec | |

L'alignement des éléments sur l'axe principal (l'axe principal dépend du réglage de l'attribut flex-direction)

flex-start : Organiser depuis la gauche ou le haut sur l'axe principal

flex-end : Organiser depuis la droite ou le bas sur l'axe principal

centre : Organiser au centre sur l'axe principal

espace entre : commencez par les extrémités gauche et droite ou les extrémités supérieure et inférieure de l'axe principal. Organisez

espace autour : chaque élément 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.

align-items

1 .box { 2 align-items : flex-start | flex-end center | baseline 3 }

Allez directement ici Le la description de l'image est plus claire

align-content

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

Ce qui précède a présenté les propriétés du conteneur :

order L'ordre dans lequel les éléments sont triés. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0.

flex-grow　 Le taux de grossissement de l'élément, la valeur par défaut est 0, c'est-à-dire que s'il reste de l'espace, il ne sera pas agrandi.

flex-shrink　 Le taux de rétrécissement de l'article, la valeur par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'article rétrécira.

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

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

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

order

1     .item {
2       order: <integer>;
3     }

flex-grow

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

flex-shrink

1     .item {
2       flex-shrink: <number>; /* default 1 */
3     }

flex-basis

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

flex

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

align-self

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

容器属性和项目属性是可以配合使用的，用法类似于CSS的行内式和嵌入式的道理一样。希望你可以在实际应用中熟练使用。

相关推荐：

css实现布局时可以用的几个技巧（代码）

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!