Initiation au modèle des boites flexibles

Avec le modèle des boites flexibles, nous allons pouvoir définir des conteneurs flexibles. Ces conteneurs sont dits « flexibles » car leurs enfants directs vont être des éléments flexibles qui vont pouvoir se réarranger (se redimensionner, se réaligner, etc.) automatiquement dans leur conteneur lorsque celui-ci change de dimension.

Le modèle des boites flexibles fait la distinction entre deux types de boites auxquelles on va pouvoir appliquer différentes propriétés : des conteneurs flexibles d’un côté et des éléments flexibles ou « flex items » de l’autre.

Le principe du modèle flexible

Il est assez simple, nous allons définir un conteneur flexible (l’élément parent) en attribuant la propriété css display : flex . Tous les éléments directement contenus dans ce conteneur (c’est-à-dire tous les enfants directs) vont alors automatiquement devenir des éléments flexibles.

Sur le code HTML suivant, nous définissons un élément <div>, auquel nous attribuons l’attribut class ="le_parent", comme étant le conteneur parent des éléments <section> :

<div class="le_parent">
     <section>
          <h2>Première section</h2>
          <p>Texte de ma première section</p>
     </section>
     <section>
           <h2>Deuxième section</h2>
           <p>Texte de ma deuxième section, ce texte est plus long, la section s'adapte. </p>
     </section>
     <section>
           <h2>Troisième section</h2>
           <p>Texte de ma troisième section</p>
     </section>

</div>

Nous venons ensuite lui appliquer les règles CSS suivantes :

.le_parent {
     display:flex;
     background:#a1a6ab;
}
.le_parent section {
     color:#000000;
     background:#ffffff;
     padding:20px;
     margin:20px;
}

Et nous obtiendrons ce qui suit, l’élément <div> (en gris clair) est le conteneur flexible, les <section> (en blanc) sont les éléments flexibles, leur largeur s’adapte à leur contenu tant que l’élément parent le permet. Ces derniers viennent naturellement se mettre les uns à côté des autres à l’intérieur de l’élément parent :

Il nous est désormais possible de positionner des éléments de type block les uns à côtés des autres. Nous pouvons donc envisager de disposer ces éléments dans la page les uns par rapport aux autres, en un mot, faire de la mise en page. Mais pour cela, nous aurons besoins de pouvoir affiner et comprendre les propriétés des conteneurs parents et de leurs enfants flexibles.

Pour manipuler plus finement nos éléments, la propriété CSS flex embarque tout un chapelet de propriétés dédiées. Certaines vont être appliquables au container parent d’autre aux enfants :

• Propriétés du container parent
• Propriétés de l’élément enfant

Les propriétés du container parent

Les propriétés de l’élément enfant

Dans les exemples suivants, l’élément enfant ciblé par les règles est l’élément 2, affiché en jaune