CSS flexbox facilite la conception d'une structure de mise en page flexible et réactive sans utiliser de flottant ou de positionnement.

• Flex container

  • display
  • flex-direction
  • justify-content
  • align-items
  • flex-wrap
  • flex-flow
  • align-content

• Flex Item

  • align-self
  • order
  • flex-grow
  • flex-basis
  • flex-shrink
  • flex

Flex container

Les propriétés suivantes sont appliquées au conteneur flexible.

display

Il transforme le conteneur en conteneur flexible (flexbox) ou en ligne flexible.

• flex: cette valeur transformera les éléments du conteneur en éléments flexibles.

flex-direction

Il spécifie dans quelle direction va l'axe principal.

• ligne: c'est la valeur par défaut, les éléments flexibles seront affichés horizontalement et l'axe principal ira de gauche à droite.

• row-reverse: c'est la même chose que row, sauf que l'ordre sera inversé et que l'axe principal ira de droite à gauche.

• column: les éléments flexibles seront affichés sous forme de colonne (verticalement) et la direction principale ira de haut en bas.

• column-reverse: c'est la même chose qu'une column, sauf que l'ordre sera inversé et l'axe principal ira de bas en haut.

justify-content

Il est utilisé pour contrôler la façon dont les éléments doivent être positionnés en suivant main axis.

• center: cette valeur centrera tous les éléments.

• space-between: Il répartira également l'espace disponible entre les articles.

• space-around: Cela donnera à chaque élément flexible la même quantité d'espace à gauche et à droite.

• space-evenly: Cette valeur garantit que l'espace entre les éléments flexibles sera le même.

• flex-start: c'est la valeur par défaut, les éléments seront positionnés au début du conteneur flexible.

• flex-end: les articles seront positionnés à la fin du conteneur flexible.

align-items

Il est utilisé pour contrôler la position des éléments le long de la cross axis.

• stretch: c'est la valeur par défaut, les éléments flexibles seront étirés le long de l'axe transversal.

• center: Cette valeur centrera les éléments le long de l'axe transversal.

• flex-start: les éléments seront positionnés au début de l'axe transversal.

• flex-end: les articles seront positionnés à la fin de l'axe transversal.

flex-wrap

• wrap: Cette valeur mettra les articles débordants dans une nouvelle ligne.

flex-flow

La propriété flex-flow est une propriété abrégée pour définir à la fois les propriétés flex-direction et flex-wrap.
exemple: flex-flow: column wrap;

align-content

Il fait le même travail que align-items, sauf que cette propriété aligne le conteneur flexible le long de l'axe transversal si un espace supplémentaire est disponible. Notez que la propriété ne sera appliquée que si le nombre de conteneurs flexibles est supérieur à un.

• stretch: il s'agit des conteneurs flexibles par défaut qui s'étirent pour occuper l'espace restant.

• center: Cette valeur centrera le conteneur flexible le long de l'axe transversal.

• flex-start: le conteneur flexible sera positionné au début de l'axe transversal.

• flex-end: le conteneur flexible sera positionné à la fin de l'axe transversal.

• space-between: Il répartira également l'espace disponible entre les conteneurs flexibles.

• space-around: Cela donnera à chaque conteneur flexible la même quantité d'espace à gauche et à droite.

Flex Item

Les propriétés suivantes sont appliquées à l'élément flexible.

align-self

La propriété align-items définit l'alignement par défaut pour tous les éléments flexibles,align-self nous permet de remplacer cet alignement par défaut pour un élément individuel.

• auto: c'est le défaut.
• center: Cette valeur centrera l'élément flexible vers son conteneur.

• flex-start: l'élément flexible sera positionné au début de l'axe transversal.

• flex-end: l'élément flexible sera positionné à la fin de l'axe transversal.

• stretch: l'élément flexible sera étiré le long de l'axe transversal.

order

La propriété order contrôle l'ordre dans lequel les enfants d'un conteneur flexible apparaissent dans le conteneur flexible. La valeur doit être un entier.
exemple: order: -1;

flex-grow

Il donne à l'élément flexible la possibilité de grandir. La valeur doit être positive.
exemple: flex-grow: 1;

flex-basis

Il définit la base flexible, en d'autres termes la largeur.
exemple: flex-basis: 30%;

flex-shrink

Il contrôle la façon dont un élément flexible peut rétrécir.
flex-shrink: 0 il ne rétrécira pas
flex-shrink: 1 il rétrécira.
exemple: flex-shrink:0

flex

Nous pouvons simplifier flex-grow,flex-based flex-shrink avecflex suivi par les valeurs.
exemple: flex: 0 30% auto