Grille responsive [flexbox] : le container

Les flexbox vous permettent, si votre html est structuré correctement, de créer des grilles responsive (qui s'adapte à la taille de l'écran de l'utilisateur) très rapidement.

Pour commencer, la structure de votre HTML doit être la suivante :

<div class="flexContainer">
   <div class="colonne">CONTENU</div>
   <div class="colonne">CONTENU UN PEU PLUS LONG</div>
   <div class="colonne">CONTENU TREEEEEEEEES TREEEEEEES LONG...</div>
</div>

Dans votre CSS ajoutez simplement :

.flexContainer {
      display : flex;
}

Le résultat est le suivant : 3 colonne côte à côte dont la taille s'adapte à son contenu

Vous pouvez modifier ce comportement par défaut en CSS en ajoutant la propriété "flex-direction"

.flexContainer {
      display : flex;
      flex-direction : row-reverse;
}

Dans cet exemple la valeur "row-reverse" place mes colonnes à l'envers

Toutes les valeurs de "flex-direction":
• "row" : comportement par défaut, les colonnes sont alignées horizontalement dans le bon sens
• "row-reverse" : les colonnes sont alignées horizontalement dans le sens inverse
• "column" : les colonnes sont placées les unes en dessous des autres
• "column-reverse" : les colonnes sont placées les unes en dessous des autres dans le sens inverse

Disons maintenant que je spécifie une largeur à mes colonnes

.colonne {
      width : 300px;
}

Mes colonnes sont automatiquement redimensionnées pour qu'elles tiennent toutes alignées dans leur container

On peu cependant forcer une taille défini aux colonnes en ajoutant la propriété "flex-wrap" au flexContainer

.flexContainer {
      display : flex;
      flex-wrap : wrap;
}

Pour déterminer l'allignement de vos colonnes dans le container, utilisez la propriété "justify-content"

.flexContainer {
      display : flex;
      justify-content : center;
}

Les autres valeurs de cette propriété sont :
• "flex-start" : valeur par défaut, aligné à gauche
• "flex-end" : aligné à droite
• "center" : aligné au center
• "space-around" : prend tout l'espace en conservant des marges à gauche et à droite

• "space-between" : prend tout l'espace sans conserver de marge

Si j'augmente la hauteur du container, les colonnes s'adaptent pour occuper tout l'espace

Il es possible de changer ce comportement avec la propriété "align-items"

.flexContainer {
      display : flex;
      align-items : center;
      height : 150px;
}

Les autres valeurs possibles sont :
• "stretch" : valeur par défaut, les colonnes occupent toute la hauteur disponible
• "flex-start" : collé en haut du container
• "flex-end" : collé en bas du container
• "center" : centré verticalement dans le container

Suite de l'article : les propriétés des colonnes (en cours d'écriture)