Introduction aux éléments de mise en page Flex en CSS (avec code)

Le contenu de cet article est une introduction aux éléments de mise en page Flex en CSS (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

La mise en page flex est une "mise en page élastique", et n'importe quel élément peut être spécifié comme une mise en page Flex en définissant l'attribut CSS display:flex le navigateur du noyau webkit est display: -webkit-flex;
.
Un élément utilisant la disposition Flex est appelé un « conteneur flexible », et tous ses sous-éléments sont appelés éléments Flex

Attributs du conteneur

flex-direction

 ; La valeur de sélection du sens de disposition des éléments : ligne (valeur par défaut : de gauche à droite) | ligne-inverse (de droite à gauche) | colonne-inverse (de bas en haut)

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

flex-wrap

Définissez si l'élément doit être enveloppé. Sélectionnez la valeur : nowrap (valeur par défaut : pas de retour à la ligne) | break, première ligne ci-dessous)

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

flex-flow

est l'abréviation de l'attribut flex-direction et de l'attribut flex-wrap, valeur par défaut Définit l'alignement des éléments sur le axe principal pour la ligne nowrap

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

justify-content

. Sélectionnez la valeur flex-start (aligné à gauche par défaut) | flex-end (aligné à droite) | space-between (aligné aux deux extrémités) | espace-autour (équidistant pour chaque élément)

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

align-items
Définit la manière dont les éléments sont alignés sur l'axe transversal. Sélectionner les valeurs flex-start (alignement du point de départ de l'axe transversal) | flex-end (alignement du point final de l'axe transversal) | de la première ligne de texte de l'élément) | stretch (item Si la hauteur n'est pas définie ou définie sur auto, elle occupera la hauteur de tout le conteneur)

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

align-content
définit l'alignement de plusieurs axes. Cette propriété n'a aucun effet si le projet ne comporte qu'un seul axe.

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

Propriétés de l'article

commande

.item {
  order: <integer>;
}

flex-grow

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

flex-shrink

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

flex-base

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

flex

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

align-self

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

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!