Mémo FLEXBOX

Utilité des flexBox

Flexbox facilite la création de composants web par rapport aux méthodes avec float ou inline-block.

flex-direction : row

flex-direction : column

flex-direction : row-reverse

flex-direction : column-reverse

Flex-GROW

En construction

Flex-BASIS

En construction

Utilisation de flexbox

<div class="container">
  <div class="item"> item 1 </div>
  <div class="item"> item 2 </div>
  <div class="item"> item 3 </div>
</div>

.parent{
  display: flex;
}

ORDER

Order définit une position précise à un item particulier.

Flex-shrink

En construction

Flex

En construction

EXEMPLE

MENU

Flexbox utilisé en colonnes pour afficher les liens horizontalement.

Espace profil

Flexbox utilisé pour séparer horizontalement la photo de la description du profil. Autre flexbox utilisé pour le centrage du texte du bouton

Recherche

Flexbox utilisé pour séparer et définir horizontalement l’espace idéal pour chaque élément.