Arts numériques

Les valeurs les plus courantes de display sont display:inline, qui transforme un élément en un élément inline, ou display:block. display:none permet quand àlui de cacher un élément dans la page, pour le rendre visible en cas de clic ou de survol.

Mais display:flex (ou encore display:grid, qui fera l’objet d’un autre article) permet un comportement plus complexe, principalement l’organisation horizontale des contenus et la gestion de leur répartition horizontale et verticale.

Une déclaration qui affecte les enfants

Il faut comprendre que display:flex va affecter non pas l’élément qui reçoit cette déclaration, mais ses enfants. Voici le comportement par défaut de flex :

.conteneur {
  display: flex; 
}

Attention, tous les enfants directement présents dans .conteneur seront affectés, quels que soit le type de tag (inline ou block, article, p, div, etc.). Il est donc nécessaire de bien structurer le code html dans ce but.

... Et plein d’options !

Une fois que le conteneur a reçu le comportement de base du flex, il est possible d’utiliser un grand nombre d’options complémentaires, toutes détaillées de manière claire sur le site CSS tricks (par exemple).
Ces déclarations css complémentaires sont de deux types : celles qui s’appliquent sur le conteneur, et celles qui s’applique sur ses enfants.

Un exemple : flex-wrap:wrap

flex-wrap est un attribut important, qui permet aux éléments enfants de s’afficher sur plusieurs lignes si le conteneur est trop petit pour tout afficher sur une seule.
Ce code html permet de tester flex :

<section class="parent">
    <article>Bloc</article>
    <article>Bloc</article>
    <article>Bloc</article>
    <article>Bloc</article>
    <article>Bloc</article>
    <article>Bloc</article>
</section>

Voici un premier essai avec des enfants avec une largeur de 25% :

.parent {
display:flex;
}
.parent article{
width:25%;
}

Malgré la taille en 25%, les 6 éléments se répartissent la largeur de leur parent en flex. Par défaut, les enfants d’un élément en display:flex ne passent pas àla ligne lorsque leur taille exède leur parent.

Avec flex-wrap : wrap

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

.parent article{
width:25%;
}

Cette fois, les éléments reçoivent l’autorisation avec flex-wrap:wrap de passer àla ligne.

Des options nombreuses

Flex comporte de nombreuses options supplémentaires. Certaines sont destinée àl’élément parent, comme flex-wrap, mais d’autres peuvent être appliqués aux enfants.

Par exemple,
– order permet de changer l’ordre des éléments.

.element2 {
order:-1;
}

– grow permet àcertains enfants de grandir plus que d’autres

.element4 {
  flex-grow: 4;
}

Voir l’excellent article sur CSS trick pour une description assez complète des possibilités