Les langages CSS Mise en page

Flexbox

display: flex transforme un élément en conteneur flexible : ses enfants directs se placent sur une ligne, et on règle leur répartition depuis le conteneur.

.barre {
    display: flex;
    justify-content: space-between;   /* répartition sur la ligne */
    align-items: center;              /* alignement vertical      */
    gap: 16px;                        /* espace entre les enfants */
}

`justify-content`	Effet
`flex-start`	tout au début
`center`	tout au milieu
`space-between`	le premier au début, le dernier à la fin, le reste réparti
`space-around`	un espace égal autour de chacun

flex-direction: column place les enfants en colonne ; flex-wrap: wrap les laisse passer à la ligne suivante quand la place manque.

Partager la place

Sur un enfant, la propriété flex dit comment il prend la place libre :

.contenu        { flex: 1; }          /* prend toute la place restante   */
.barre-laterale { flex: 0 0 250px; }  /* 250px, ne grandit ni ne rétrécit */

flex réunit trois valeurs : flex-grow (part de l'espace libre qu'il reçoit), flex-shrink (s'il accepte de rétrécir), flex-basis (sa taille de départ).

2 exercices pour cette lecon

Les exercices demandent un compte : il faut bien enregistrer votre progression quelque part. La lecture, elle, reste libre. Creer un compte

La barre de navigation moyen lecon a valider
Une colonne qui prend la place moyen lecon a valider