Bien comprendre les bases du display:flex

Bonjour à toi !

On dit souvent que le flex est magique, qu'il résout tous les soucis. Personnellement, je n'utilise plus que ça ! Mais il n'est pas forcément facile à apprivoiser, même avec l'aide de notre petite grenouille favorite (clique pour voir de quoi je parle). Je te propose ici de reprendre les bases des bases du flex, pour essayer de le comprendre un peu mieux. Tu verras, ils changent nos codes !


Comme l'a très bien expliqué Miettes juste ici, le flex est un peu un mélange magique de tous les autres display. Pour des exemples concrets, il va nous servir par exemple à :
> gérer automatiquement les marges entre nos blocs
> gérer automatiquement les différences de tailles voulues entre 2 blocs
> gérer automatiquement le placement de nos blocs sur la page
> faire passer la dernière ligne d'un tableau sur plusieurs colonnes si elle en comporte moins que les autres
Et il y a encore pleins d'autres exemples !

Si tu as d'autres exemple où le flex t'a "sauvé", n'hésite pas à le dire à la suite, on le rajoutera !


Un conteneur est, dans toutes les balises / propriétés, un "objet" qui va contenir le reste. Dans le cadre du flex le conteneur sera la balise à laquelle on va appliquer la propriété display:flex et qui va contenir l'ensemble de nos blocs à placer et mettre en page. En pratique, voilà comment sera déclaré le conteneur dans la CSS :

Code:

.monConteneur{
 display: flex;
}

Ceci allant avec le HTML associé :

Code:

<div class="monConteneur">
</div>

Un item sera donc un enfant direct du conteneur, auquel sera appliqué les propriétés déclarées. Par chance, avec le flex il n'y a aucune déclaration des enfants à faire : tous les enfants directs du conteneur seront des items.

Code:

<div class="monConteneur">
 <div>
 1er enfant du conteneur
 </div>
 <div>
 2ème enfant du conteneur
 </div>
 <div>
 3ème enfant du conteneur
 </div>
 <div>
 4ème enfant du conteneur
 </div>
 <div>
 5ème enfant du conteneur
 </div>
</div>

On parle de "distribution" pour définir le sens d'affichage ainsi que la possibilité, ou non, de répartir nos items sur plusieurs lignes / colonnes.


Pour gérer le sens d'affichage, on applique au conteneur la propriété CSS flex-direction avec une des valeurs suivante :
• row (distribution en ligne, valeur par défaut)

Aperçu:

• column (distribution en colonne)

Aperçu:

• row-reverse (distribution en ligne inversée)

Aperçu:

• column-reverse (distribution en colonne inversée)

Aperçu:

Pour gérer la répartition, ou non, sur plusieurs lignes / colonnes, on utilise la propriété flex-wrap appliqué au conteneur. Les valeurs peuvent être une des suivantes (tous les exemples sont avec un sens d'affichage "en ligne" mais tout est compatible avec le sens "column") :
• nowrap (les éléments ne passent pas sur plusieurs lignes/colonnes, valeur par défaut)

Aperçu:

• wrap (les éléments passent sur plusieurs lignes/colonnes dans le sens de lecture)

Aperçu:

• wrap-reverse (les éléments passent sur plusieurs lignes/colonnes dans le sens inverse)

Aperçu:

Et pour se faciliter la vie, on peut même combiner les deux grâce à la propriété flex-flow.
Les propriétés sont les mêmes que pour le flex-direction et le flex-wrap, dans ce sens là. Par exemple :

Aperçu:

Dans le flex, il y a plusieurs alignements : celui sur l'axe principal, celui sur l'axe secondaire et enfin, celui d'un élément isolé.


On parle d'axe principal celui qui a été choisi pour sens d'affichage. Pour gérer l'alignement, on applique au conteneur la propriété justify-content. Les différentes valeurs de cette propriétés sont :

• flex-start (éléments positionnés au début du sens de lecture, valeur par défaut)

CSS du conteneur:

• flex-end (éléments positionnés à la fin)

CSS du conteneur:

• center (position centrale)

CSS du conteneur:

• space-between (répartition “justifiée” avec l'espace situé entre les items)

CSS du conteneur:

• space-around (variante de répartition “justifiée” avec les espaces autour des items)

CSS du conteneur:

On parle d'axe secondaire celui qui n'a pas été choisi pour sens d'affichage. Pour gérer l'alignement secondaire, on applique au conteneur la propriété align-items. Les différentes valeurs de cette propriétés sont :

• flex-start (au début)

Aperçu:

• flex-end (à la fin)

Aperçu:

• center (au centre)

Aperçu:

• baseline (généralement identique à flex-start)

Aperçu:

• stretch (étirés dans l’espace disponible, valeur par défaut)

Aperçu:

On peut décidé que l'un des "enfants" n'aura pas le même alignement que ses "frères". Pour cela, on va lui appliquer la propriété align-self dont les valeurs sont les mêmes que pour align-items.

Par exemple :

Codes:

Donne ce résultat :

Aperçu:

Tu pourras parfois trouver la propriété align-content. Il s'applique au conteneur et prend les mêmes valeurs que la propriété justify-content.
Nous nous en servons rarement, mais pour te donner un exemple afin de comprendre : imaginons que nous ayons un conteneur contenant 5 items que nous autorisons à aller à la ligne s'ils n'ont pas de place suffisante. Voilà ce que nous aurons si nous laissons le "align-content" par défaut :

Spoiler:

Comme tu le vois, lors du retour à la ligne, les cases se collent.

Une des solutions consistent à ajouter un align-content :

Spoiler:

Mais que serait une propriété "flex" sans cette notion de flexibilité ? Certaines propriétés CSS vont nous permettre de gérer la capacité de nos items à s'élargir ou se rétrécir automatiquement selon les besoins. La propriété flex, qui s'applique sur les items contient 3 valeurs :

• flex-grow : capacité pour un élément à s’étirer dans l’espace restant. Par défaut à 0 (on interdit l'élargissement), le plus souvent on le place à 1 pour l'autoriser.
• flex-shrink : capacité pour un élément à se contracter si nécessaire. Par défaut à 1 (on autorise à se réduire), on le place à 0 pour interdire
• flex-basis : taille initiale de l’élément avant que l’espace restant ne soit distribué.

Un petit exemple pour montrer tout ça Imaginons que dans mon conteneur j'ai 5 cases, que je l'autorise à passer à la ligne s'il a besoin et que je lui fixe des dimensions comme ce qui suit :

Code:

.monConteneur{
 width:1000px;
 height:300px;
 padding:15px 5px;
 border:blue 1px solid;
 display:flex;
 flex-flow:row wrap;
 justify-content:space-between;
 align-items:stretch;
 align-content:space-around;
 }
 
 .monConteneur div{
 width:480px;
 padding:3px;
 border:1px solid #000;
 }

Voilà le rendu que j'aurai :

Spoiler:

Mais si je lui dis que sur mon dernier élément, je veux qu'il ait un "flex-grow" à 1 :

Code:

.monConteneur div:last-child{
 flex:1 1 100%;
 }

Spoiler:

C'est ce qui sert, par exemple, dans ce libre-service

Le flex-shrink, lui, va servir si on autorise pas le retour à la ligne. Par exemple si je dis à mon items : tu as le droit de t'étirer mais pas de te réduire et ta taille de base est de 300px :

Code:

.monConteneur div{
 padding:3px;
 border:1px solid #000;
 flex:1 0  300px;
 }

On va avoir ce rendu :

Spoiler:

Alors que si on met cette valeur à 1, les cases vont se réduire assez pour que tout tienne dans le conteneur :

Spoiler:

Il y a énormément de possibilité, mais généralement sur les forums on utilisera rarement autre chose que flex : 1 1 Xpx avec pour dernière valeur un nombre en px ou %

---

Te voilà maintenant renseigné un peu plus sur le "display:flex". Il existe énoooormément de choses à faire avec celui-ci, et il faut s'entrainer pour pouvoir tout apprivoiser Tu peux t'aider du jeu de la grenouille pour te familisariser avec tout ça

Si tu as la moindre question, n'hésite surtout pas à la poser, nous serons là pour y répondre. Le flex n'est pas toujours simple à comprendre au départ alors entraîne toi