Flexbox - Guide rapide

Cascension Style Sheets (CSS) est un langage de conception simple destiné à simplifier le processus de présentation des pages Web. CSS gère l'aspect et la convivialité d'une page Web.

À l'aide de CSS, vous pouvez contrôler la couleur du texte, le style des polices, l'espacement entre les paragraphes, la taille et la disposition des colonnes, les images ou couleurs d'arrière-plan utilisées, les conceptions de mise en page, les variations d'affichage pour différents appareils et tailles d'écran ainsi que divers autres effets.

Pour déterminer la position et les dimensions des boîtes, en CSS, vous pouvez utiliser l'un des modes de mise en page disponibles -

The block layout - Ce mode est utilisé pour la mise en page des documents.
The inline layout - Ce mode est utilisé pour la mise en page du texte.
The table layout - Ce mode est utilisé pour la mise en page des tableaux.
The table layout - Ce mode est utilisé pour positionner les éléments.

Tous ces modes sont utilisés pour aligner des éléments spécifiques comme des documents, du texte, des tableaux, etc., cependant, aucun d'entre eux ne fournit une solution complète pour mettre en page des sites Web complexes. Initialement, cela est utilisé en utilisant une combinaison d'éléments flottants, d'éléments positionnés et de disposition de table (souvent). Mais les flotteurs ne permettent que de positionner horizontalement les boîtes.

Qu'est-ce que Flexbox?

En plus des modes mentionnés ci-dessus, CSS3 fournit un autre mode de mise en page Boîte flexible, communément appelé Flexbox.

En utilisant ce mode, vous pouvez facilement créer des mises en page pour des applications et des pages Web complexes. Contrairement aux flotteurs, la disposition Flexbox donne un contrôle complet sur la direction, l'alignement, l'ordre et la taille des boîtes.

Caractéristiques de Flexbox

Voici les caractéristiques notables de la disposition Flexbox -

Direction - Vous pouvez organiser les éléments sur une page Web dans n'importe quelle direction, par exemple de gauche à droite, de droite à gauche, de haut en bas et de bas en haut.
Order - En utilisant Flexbox, vous pouvez réorganiser l'ordre du contenu d'une page Web.
Wrap - En cas d'espace incohérent pour le contenu d'une page Web (en une seule ligne), vous pouvez les envelopper sur plusieurs lignes (à la fois horizontalement) et verticalement.
Alignment - En utilisant Flexbox, vous pouvez aligner le contenu de la page Web par rapport à leur conteneur.
Resize - En utilisant Flexbox, vous pouvez augmenter ou diminuer la taille des éléments de la page pour tenir dans l'espace disponible.

Navigateurs pris en charge

Voici les navigateurs prenant en charge Flexbox.

Chrome 29+
Firefox 28+
Internet Explorer 11+
Opera 17+
Safari 6.1 ou version ultérieure
Android 4.4+
iOS 7.1+

Pour utiliser Flexbox dans votre application, vous devez créer / définir un conteneur flex à l'aide du display propriété.

Usage -

display: flex | inline-flex

Cette propriété accepte deux valeurs

flex - Génère un conteneur flexible de niveau bloc.
inline-flex - Génère une boîte de conteneur flexible en ligne.

Maintenant, nous allons voir comment utiliser le display propriété avec des exemples.

Fléchir

En transmettant cette valeur à la propriété d'affichage, un conteneur flexible de niveau bloc sera créé. Il occupe toute la largeur du conteneur parent (navigateur).

L'exemple suivant montre comment créer un conteneur flexible de niveau bloc. Ici, nous créons six boîtes de couleurs différentes et nous avons utilisé le conteneur flexible pour les contenir.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:flex;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Depuis que nous avons donné la valeur flex à la display propriété, le conteneur utilise la largeur du conteneur (navigateur).

Vous pouvez observer cela en ajoutant une bordure au conteneur comme indiqué ci-dessous.

.container {
   display:inline-flex;
   border:3px solid black;
}

Il produira le résultat suivant -

Flex en ligne

En passant cette valeur au displaypropriété, un conteneur flexible de niveau en ligne sera créé. Il prend juste la place requise pour le contenu.

L'exemple suivant montre comment créer un conteneur flexible en ligne. Ici, nous créons six boîtes de couleurs différentes et nous avons utilisé le conteneur inline-flex pour les contenir.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
      }
      .box{
         font-size:35px;
         padding:15px;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Depuis que nous avons utilisé un conteneur flex en ligne, il a juste pris l'espace nécessaire pour envelopper ses éléments.

le flex-direction La propriété est utilisée pour spécifier la direction dans laquelle les éléments du conteneur flex (flex-items) doivent être placés.

usage -

flex-direction: row | row-reverse | column | column-reverse

Cette propriété accepte quatre valeurs -

row - Dispose les éléments du conteneur horizontalement de gauche à droite.
row-reverse - Dispose les éléments du conteneur horizontalement de droite à gauche.
column - Dispose les éléments du conteneur verticalement de gauche à droite.
column-reverse - Dispose les éléments du conteneur verticalement de droite à gauche.

Maintenant, nous allons prendre quelques exemples pour démontrer l'utilisation du direction propriété.

rangée

En passant cette valeur au direction propriété, les éléments du conteneur sont disposés horizontalement de gauche à droite comme indiqué ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur rowà la propriété flex-direction . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

rangée inversée

En passant cette valeur au direction propriété, les éléments du conteneur sont disposés horizontalement de droite à gauche comme indiqué ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur row-reverseà la propriété flex-direction . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directionrow-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

colonne

En passant cette valeur au direction propriété, les éléments du conteneur sont disposés verticalement de haut en bas comme illustré ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur columnà la propriété flex-direction . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

colonne inversée

En passant cette valeur au direction propriété, les éléments du conteneur sont disposés verticalement de bas en haut comme indiqué ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur column-reverseà la propriété flex-direction . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directioncolumn-reverse.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:column-reverse;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Généralement, en cas d'espace insuffisant pour le conteneur, le reste des éléments flexibles sera masqué comme indiqué ci-dessous.

le flex-wrap La propriété est utilisée pour spécifier les contrôles si le conteneur flexible est sur une seule ligne ou sur plusieurs lignes.

usage -

flex-wrap: nowrap | wrap | wrap-reverse
flex-direction: column | column-reverse

Cette propriété accepte les valeurs suivantes -

wrap - En cas d'espace insuffisant pour eux, les éléments du conteneur (flexitems) s'enrouleront dans des lignes flex supplémentaires de haut en bas.
wrap-reverse - En cas d'espace insuffisant pour eux, les éléments du conteneur (flex-items) s'enrouleront dans des lignes flex supplémentaires de bas en haut.

Maintenant, nous allons voir comment utiliser le wrap propriété, avec des exemples.

emballage

En passant la valeur wrap à la propriété flex-wrap, les éléments du conteneur sont disposés horizontalement de gauche à droite comme illustré ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur wrapà la propriété flex-wrap . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

wrap-reverse

En passant la valeur wrap-reverse à la propriété flex-wrap, les éléments du conteneur sont disposés horizontalement de gauche à droite comme illustré ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur wrap-reverseà la propriété flex-wrap . Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directionrow.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap-reverse;
      }
   </style>
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

wrap (colonne)

En passant la valeur wrap à la propriété flex-wrap et la valeur column à la propriété flex-direction, les éléments du conteneur sont disposés horizontalement de gauche à droite comme illustré ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur wrap à la flex-wrappropriété. Ici, nous créons six boîtes avec des couleurs différentes avec la valeur flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

wrap-reverse (colonne)

En passant la valeur wrap-reverse à la propriété flex-wrap et la valeur column à la propriété flex-direction, les éléments du conteneur sont disposés horizontalement de gauche à droite comme illustré ci-dessous.

L'exemple suivant montre le résultat de la transmission de la valeur wrap-reverseà la propriété flex-wrap . Ici, nous créons six boîtes avec des couleurs différentes et avec la valeur flex-directioncolumn.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
         width:100px;
      }
      .container{
         display:flex;
         border:3px solid black;
         flex-direction:column;
         flex-wrap:wrap-reverse;
         height:100vh;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Vous pouvez souvent observer un espace supplémentaire dans le conteneur après avoir disposé les éléments flexibles comme indiqué ci-dessous.

Utilisation de la propriété justify-content, vous pouvez aligner le contenu le long de l'axe principal en répartissant l'espace supplémentaire comme prévu. Vous pouvez également ajuster l'alignement des flexitems, au cas où ils dépasseraient la ligne.

usage -

justify-content: flex-start | flex-end | center | space-between | space-around| space-evenly;

Cette propriété accepte les valeurs suivantes -

flex-start - Les flex-items sont placés au début du conteneur.
flex-end - Les flex-items sont placés à l'extrémité du conteneur.
center - Les flex-items sont placés au centre du conteneur, où l'espace supplémentaire est également réparti au début et à la fin des flex-items.
space-between - L'espace supplémentaire est également réparti entre les éléments flexibles.
space-around - L'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre les bords du conteneur et son contenu est égal à la moitié de l'espace entre les éléments flexibles.

Maintenant, nous allons voir comment utiliser la propriété justify-content, avec des exemples.

flex-start

En passant cette valeur à la propriété justify-content, les flex-items sont placés au début du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-start à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

extrémité flexible

En passant cette valeur à la propriété justify-content, les flex-items sont placés à l'extrémité du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-end à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

centre

En passant cette valeur à la propriété justify-content, les flex-items sont placés au centre du conteneur, où l'espace supplémentaire est également réparti au début et à la fin des flex-items.

L'exemple suivant montre le résultat de la transmission de la valeur center à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

l'espace entre

En passant cette valeur à la propriété justify-content, l'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre deux éléments flexibles soit le même et que le début et la fin des éléments flexibles touchent les bords du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur space-between à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

espace autour

En passant cette valeur à la propriété justify-content, l'espace supplémentaire est également réparti entre les éléments flexibles de sorte que l'espace entre deux éléments flexibles est le même. Cependant, l'espace entre les bords du conteneur et son contenu (le début et la fin des éléments flexibles) est la moitié de l'espace entre les éléments flexibles.

L'exemple suivant montre le résultat de la transmission de la valeur space-around à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

espace-uniformément

L'exemple suivant montre le résultat de la transmission de la valeur space-evenly à la justify-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         border:3px solid black;
         justify-content:space-evenly;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

le align-items la propriété est la même que justify content. Mais ici, les éléments étaient alignés sur l'accès croisé (verticalement).

Usage -

align-items: flex-start | flex-end | center | baseline | stretch;

Cette propriété accepte les valeurs suivantes -

flex-start - Les éléments flexibles étaient alignés verticalement en haut du conteneur.
flex-end - Les éléments flexibles étaient alignés verticalement au bas du conteneur.
flex-center - Les éléments flexibles ont été alignés verticalement au centre du conteneur.
stretch - Les éléments flexibles ont été alignés verticalement de sorte qu'ils remplissent tout l'espace vertical du conteneur.
baseline - Les éléments flexibles ont été alignés de telle sorte que la ligne de base de leur texte s'aligne le long d'une ligne horizontale.

flex-start

En transmettant cette valeur à la propriété align-items, les éléments flex étaient alignés verticalement en haut du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-start à la align-items propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

extrémité flexible

En passant cette valeur à la propriété align-items, les éléments flexibles sont alignés verticalement au fond du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-end à la align-items propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

centre

En passant cette valeur à la propriété align-items, les éléments flexibles sont alignés verticalement au centre du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-center à la align-items propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

étendue

En passant cette valeur à la propriété align-items, les éléments flexibles sont alignés verticalement de sorte qu'ils remplissent tout l'espace vertical du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur stretch à la align-items propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

ligne de base

En passant cette valeur à la propriété align-items, les éléments flexibles sont alignés de telle sorte que la ligne de base de leur texte s'aligne le long d'une ligne horizontale.

L'exemple suivant montre le résultat de la transmission de la valeur baseline à la align-items propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         align-items:baseline;
      }
   </style>
   
   <body>
      <div class = "container">
      <div class = "box box1">One</div>
      <div class = "box box2">two</div>
      <div class = "box box3">three</div>
      <div class = "box box4">four</div>
      <div class = "box box5">five</div>
      <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Dans le cas où le conteneur flex a plusieurs lignes (quand, flex-wrap: wrap), la propriété align-content définit l'alignement de chaque ligne dans le conteneur.

Usage -

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Cette propriété accepte les valeurs suivantes -

stretch - Les lignes du contenu s'étirent pour remplir l'espace restant.
flex-start - Toutes les lignes du contenu sont emballées au début du conteneur.
flex-end - Toutes les lignes du contenu sont emballées à la fin du conteneur.
center - Toutes les lignes du contenu sont emballées au centre du conteneur.
space-between - L'espace supplémentaire est réparti uniformément entre les lignes.
space-around - L'espace supplémentaire est réparti entre les lignes uniformément avec un espace égal autour de chaque ligne (y compris la première et la dernière ligne)

centre

En passant cette valeur à la propriété align-content, toutes les lignes sont emballées au centre du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur center à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:43%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:center;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

flex-start

En passant cette valeur à la propriété align-content, toutes les lignes sont emballées au début du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-start à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

extrémité flexible

En passant cette valeur à la propriété align-content, toutes les lignes sont emballées à la fin du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-end à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:flex-end;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

étendue

En passant cette valeur à la propriété align-content, les lignes s'étireront pour remplir l'espace restant.

L'exemple suivant montre le résultat de la transmission de la valeur stretch à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:stretch;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

espace autour

En passant cette valeur à la propriété align-content, l'espace supplémentaire est réparti uniformément entre les lignes avec un espace égal autour de chaque ligne (y compris la première et la dernière ligne).

L'exemple suivant montre le résultat de la transmission de la valeur space-around à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-around;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

l'espace entre

En passant cette valeur à la propriété align-content, l'espace supplémentaire est réparti uniformément entre les lignes, où la première ligne sera en haut et la dernière ligne sera en bas du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur space-between à la align-content propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta;}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .box{
         font-size:25px;
         padding:15px;
         width:40%;
      }
      .container{
         display:flex;
         height:100vh;
         flex-wrap:wrap;
         align-content:space-between;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

le flex-order La propriété est utilisée pour définir l'ordre de l'élément flexbox.

L'exemple suivant montre le orderpropriété. Ici, nous créons six boîtes colorées avec les étiquettes un, deux, trois, quatre, cinq, six, disposées dans le même ordre, et nous les réorganisons dans l'ordre un, deux, cinq, six, trois, quatre, en utilisant le propriété flex-order.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:1}
      .box4{background:magenta; order:2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:rows;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

- cinq commandes

Vous pouvez également attribuer des valeurs –ve à l'ordre comme indiqué ci-dessous.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:35px;
         padding:15px;
      }
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red; order:-1}
      .box4{background:magenta; order:-2}
      .box5{background:yellow;}
      .box6{background:pink;}
      
      .container{
         display:inline-flex;
         border:3px solid black;
         flex-direction:row;
         flex-wrap:wrap;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

base flexible

Nous utilisons le flex-basis propriété pour définir la taille par défaut de l'élément flexible avant la distribution de l'espace.

L'exemple suivant illustre l'utilisation de la propriété flex-based. Ici, nous créons 3 boîtes colorées et fixons leur taille à 150 px.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:150px; }
      .box2{background:blue; flex-basis:150px;}
      .box3{background:red; flex-basis:150px;}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

Flex-Grow

Nous utilisons le flex-grow propriété pour définir la flex-growfacteur. En cas d'espace excessif dans le conteneur, il spécifie la croissance d'un élément flexible particulier.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-grow:10; flex-basis:100px; }
      .box2{background:blue; flex-grow:1; flex-basis:100px; }
      .box3{background:red; flex-grow:1; flex-basis:100px; }
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

flex-shrink

Nous utilisons la propriété flex-shrink est utilisée pour définir le flex shrink-factor. Dans le cas où il n'y a pas assez d'espace dans le conteneur, il spécifie combien un élément flexible doit être réduit.

<!doctype html>
<html lang = "en">
   <style>
      .box{
         font-size:15px;
         padding:15px;
      }
      .box1{background:green; flex-basis:200px; flex-shrink:10}
      .box2{background:blue; flex-basis:200px; flex-shrink:1}
      .box3{background:red; flex-basis:200px; flex-shrink:1}
      
      .container{
         display:flex;
         height:100vh;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

fléchir

Il existe un raccourci pour définir les valeurs de ces trois propriétés à la fois; on l'appelleflex. À l'aide de cette propriété, vous pouvez définir simultanément des valeurs flex-grow, flex-shrink et flex-base. Voici la syntaxe de cette propriété.

.item {
   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Cette propriété est similaire à align-items, mais ici, il est appliqué à des éléments flexibles individuels.

Usage -

align-self: auto | flex-start | flex-end | center | baseline | stretch;

Cette propriété accepte les valeurs suivantes -

flex-start - L'élément flexible sera aligné verticalement en haut du conteneur.
flex-end - L'élément flexible sera aligné verticalement au bas du conteneur.
flex-center - L'élément flexible sera aligné verticalement au centre du conteneur.
Stretch - L'élément flexible sera aligné verticalement de manière à remplir tout l'espace vertical du conteneur.
baseline - L'élément flexible sera aligné sur la ligne de base de l'axe transversal.

flex-start

En passant cette valeur à la propriété align-self, un élément flexible particulier sera aligné verticalement en haut du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-start à la align-self propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:start;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

extrémité flexible

En passant cette valeur à la propriété align-self, un élément flexible particulier sera aligné verticalement au fond du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur flex-end à la align-self propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:flex-end;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

centre

En passant la valeur center à la propriété align-self, un élément flexible particulier sera aligné verticalement au centre du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur center à la align-self propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:center;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

étendue

En passant cette valeur à la propriété align-self, un élément flexible particulier, il sera aligné verticalement de sorte qu'il remplisse tout l'espace vertical du conteneur.

L'exemple suivant montre le résultat de la transmission de la valeur stretch à la align-self propriété.

<!doctype html>
<html lang = "en">
   <style>
      .box1{background:green;}
      .box2{background:blue;}
      .box3{background:red;}
      .box4{background:magenta; align-self:stretch;}
      .box5{background:yellow;}
      .box6{background:pink;}
      .box{
         font-size:35px;
         padding:15px;
      }
      .container{
         display:flex;
         height:100vh;
         border:3px solid black;
         align-items:flex-start;
      }
   </style>
   
   <body>
      <div class = "container">
         <div class = "box box1">One</div>
         <div class = "box box2">two</div>
         <div class = "box box3">three</div>
         <div class = "box box4">four</div>
         <div class = "box box5">five</div>
         <div class = "box box6">six</div>
      </div>
   </body>
</html>

Il produira le résultat suivant -

↰ Previous page

Flexbox - Guide rapide

Qu'est-ce que Flexbox?

Caractéristiques de Flexbox

Navigateurs pris en charge

Fléchir

Flex en ligne

rangée

rangée inversée

colonne

colonne inversée

emballage

wrap-reverse

wrap (colonne)

wrap-reverse (colonne)

flex-start

extrémité flexible

centre

l'espace entre

espace autour

espace-uniformément

flex-start

extrémité flexible

centre

étendue

ligne de base

centre

flex-start

extrémité flexible

étendue

espace autour

l'espace entre

- cinq commandes

base flexible

Flex-Grow

flex-shrink

fléchir

flex-start

extrémité flexible

centre

étendue

Tutoriel Flexbox

Ressources utiles Flexbox