Aide-mémoire CSS flexbox (avec des exemples)

cover
Dec 05, 2019 5 min Follow me on Twitter

Subscribe to receive the free weekly article

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

flex-screenshot

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-screenshot

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.

flex-screenshot

  • 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.

flex-screenshot

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

flex-screenshot

  • 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.

flex-screenshot

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.

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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.

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

flex-wrap

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

flex-screenshot

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.

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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-screenshot

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

flex-screenshot

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

flex-screenshot

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

flex-screenshot

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-screenshot

flex-grow

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

flex-screenshot

flex-basis

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

flex-screenshot

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-screenshot

flex

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

#css

Support my work

Get articles in your inbox