Quelles sont les propriétés de la mise en page CSS Flex (mise en page élastique) ? Introduction aux propriétés de mise en page CSS Flex

Ce que cet article vous apporte, c'est quelles sont les propriétés de la mise en page CSS flex (mise en page élastique) ? L'introduction des propriétés de mise en page CSS Flex a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

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. N’importe quel conteneur peut être désigné comme une mise en page Flex.
Remarque : après avoir défini la disposition Flex, les attributs float, clear et vertical-align des éléments enfants ne seront pas valides.

Concepts de base

Les éléments qui utilisent la disposition Flex sont appelés conteneurs Flex (conteneurs flexibles), appelés « conteneurs ». Tous ses éléments enfants deviennent automatiquement des membres de conteneur, appelés éléments Flex (éléments flexibles) ou « éléments » en abrégé.
Les conteneurs ont deux axes par défaut : l'axe principal horizontal (axe principal) et l'axe transversal vertical (axe transversal). La position de départ de l'axe principal (l'intersection avec la bordure) est appelée début principal, et la position finale est appelée fin principale ; la position de départ de l'axe transversal est appelée début croisé et la position finale est appelée fin croisée.

Attribut conteneur

1. css flex-direction

L'attribut flex-direction détermine l'axe principal La direction (c'est-à-dire la direction de la disposition des éléments)
flex-direction: row | row-reverse | column-reverse
row (valeur par défaut) : L'axe principal est horizontal et le le point de départ est à l'extrémité gauche.
row-reverse : L'axe principal est horizontal et le point de départ est à l'extrémité droite.
colonne : L'axe principal est vertical et le point de départ est sur le bord supérieur.
colonne inversée : L'axe principal est vertical et le point de départ est au bord inférieur.

2. css flex-wrap (line wrap)

flex-wrap Par défaut, les éléments sont disposés sur une ligne (également appelée "axe"). L'attribut flex-wrap définit comment effectuer un retour à la ligne si un axe ne peut pas tenir.
flex-wrap: nowrap | wrap-reverse;
nowrap (par défaut) : pas de retour à la ligne.
wrap : wrap, avec la première ligne en haut.
wrap-reverse : wrap, la première ligne est en dessous.

3. css flex-flow

L'attribut flex-flow est l'abréviation de l'attribut flex-direction et de l'attribut flex-wrap. maintenant.
flex-flow : || ;

4. Aligne l'élément sur l'axe principal. justify-content: flex-start | flex-end | space-between | space-around;

flex-end: aligné à droite
centre : centré
espace entre : alignez les deux extrémités et les intervalles entre les éléments sont égaux.
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.


5. align-items

L'attribut align-items définit la manière dont les éléments sont alignés sur l'axe transversal. align-items : flex-start | flex-end | baseline | stretch ;

flex-end : Alignez le point final de l'axe transversal.
centre : alignez le milieu de l'axe transversal.
baseline : L'alignement de base de la première ligne de texte de l'élément.
stretch (valeur par défaut) : Si l'élément ne définit pas de hauteur ou est défini sur auto, il occupera toute la hauteur du conteneur.


6. align-content

L'attribut align-content définit l'alignement de plusieurs axes. Si l'élément n'a qu'un seul axe, cette propriété n'a aucun effet.align-content: flex-start | flex-end center | space-between | space-around | axe transversal aligné avec le point de départ.

centre : aligné avec le milieu de l'axe transversal.
Espace entre : alignez avec les deux extrémités de l'axe transversal et les intervalles entre les axes sont uniformément répartis.
Espace autour : Les intervalles des deux côtés de chaque axe sont égaux. Par conséquent, la distance entre les axes est deux fois plus grande que la distance entre les axes et le cadre.
étirement (valeur par défaut) : L'axe occupe tout l'axe transversal.



Attributs des articles

Ordre

L'attribut order définit l'ordre des articles. Plus la valeur est petite, plus le classement est élevé. La valeur par défaut est 0.

L'attribut flex-grow définit 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.
Si tous les éléments ont une propriété flex-grow de 1, ils diviseront également l'espace restant (le cas échéant). Si la propriété flex-grow d'un élément est 2 et que les autres éléments sont tous 1, le premier occupera deux fois plus d'espace restant que les autres éléments.
* peut être utilisé pour implémenter des mises en page à deux et trois points

3. css flex-shrink

L'attribut flex-shrink définit le taux de retrait. de l'élément, par défaut est 1, c'est-à-dire que s'il n'y a pas suffisamment d'espace, l'élément rétrécira.
Si la propriété flex-shrink de tous les éléments est 1, lorsqu'il n'y a pas suffisamment d'espace, ils seront tous réduits proportionnellement. Si la propriété flex-shrink d'un élément est 0 et que les autres éléments sont 1, le premier ne rétrécira pas lorsque l'espace est insuffisant.
Les valeurs négatives ne sont pas valables pour cette propriété.

4. css flex-basis

L'attribut flex-basis définit l'espace de l'axe principal (taille principale) occupé par l'élément avant d'allouer l'espace excédentaire. Le navigateur utilise cet attribut pour calculer s'il y a de l'espace supplémentaire sur l'axe principal. Sa valeur par défaut est auto, qui correspond à la taille d'origine du projet.
Il peut être défini sur la même valeur que l'attribut width ou height (tel que 350px), l'élément occupera alors un espace fixe.

5. css flex

L'attribut flex est l'abréviation de flex-grow, flex-shrink et flex-basis. Les deux dernières propriétés sont facultatives.
Cet attribut a deux valeurs de raccourci : auto (1 1 auto) et none (0 0 auto).
Il est recommandé d'utiliser cet attribut en premier au lieu d'écrire trois attributs distincts séparément, car le navigateur déduira les valeurs pertinentes.

6. align-self

L'attribut align-self permet à un seul élément d'avoir un alignement différent de celui des autres éléments et peut remplacer l'attribut align-items. La valeur par défaut est auto, ce qui signifie hériter de l'attribut align-items de l'élément parent, s'il n'y a pas d'élément parent, cela équivaut à stretch.

Recommandations associées :

CSSancienne versionflex et compatible_html/css_WEB-ITnose

CSS Flex-box exemple de code_html/css_WEB-ITnose

CSSmodèle de boîte flexibleApplication de flexen mise en page

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!