Télécharger le PDF du cours
- Affichage en bloc avec
display : block; - Affichage en ligne avec
display : inline; - Affichage sous forme de tableau avec
display : table; - Etc.
Le but de cette partie est de vous présenter un nouveau mode d’affichage et de disposition très puissant : la disposition selon un modèle de boites flexibles ou flexbox avec display : flex (ou display : inline-flex) et les différentes propriétés CSS liées à ce modèle.
Définition du modèle des boites flexibles ou flexbox
Le flexbox est un modèle de disposition très puissant qui va nous permettre de contrôler facilement et avec précision l’alignement, la direction, l’ordre et la taille de nos éléments (ou plus précisément de nos boites).
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 flexbox représente ainsi en quelque sorte une alternative beaucoup plus puissante à la propriété float qui nous permettait de positionner nos boites horizontalement puisqu’on va avoir cette fois-ci un contrôle total sur la disposition des éléments.
Voici un premier exemple d’organisation des éléments qu’on peut obtenir avec quelques lignes de code simplement en utilisant le modèle des boites flexibles et ses propriétés :
See the Pen Cours HTML CSS 13.1.1 by Pierre (@pierregiraud) on CodePen.
N’essayez pas pour le moment de comprendre le code ci-dessus : nous allons étudier toutes les spécificités du flexbox dans les leçons à venir !
Conteneur et éléments flexibles
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.
Concrètement, nous allons définir un conteneur flexible en attribuant un display : flex à un élément. Tous les éléments directement contenus dans ce conteneur (c’est-à-dire tous les enfants directs) vont alors automatiquement devenir des éléments flexibles.
Nous allons ensuite pouvoir manipuler chaque flex item de manière indépendante grâce à certaines propriétés du modèle des boites flexibles et / ou leur appliquer des propriétés de disposition en tant que groupe en manipulant le conteneur flexible.
Notez également qu’on va pouvoir créer autant de niveau d’imbrication de conteneurs et d’éléments flexibles que souhaité : il va en effet suffire d’ajouter un display : flex à un flex item pour qu’il serve également de conteneur flexible pour ses propres enfants.
Finalement, notez qu’on va pouvoir choisir de définir un conteneur flexible qui va avoir les mêmes propriétés qu’un élément de niveau block avec display : flex ou un conteneur qui va posséder les mêmes propriétés qu’un élément de niveau inline avec display : inline-flex.
Définir un conteneur flexible avec display : flex ou display : inline-flex n’impactera que le comportement du conteneur et pas celui de ses enfants directs qui seront toujours des éléments flexibles.
Notez bien ici que les conteneurs flexibles définissent un nouveau contexte de formatage, ce qui signifie que certaines propriétés qu’on va pouvoir utiliser avec des éléments de type block par exemple ne vont pas se comporter de la même façon avec les éléments flexibles ou ne vont simplement pas pouvoir être utilisées.
En particulier, on notera que les propriétés float, clear et vertical-align ne vont pas pouvoir s’appliquer à des éléments flexibles et que les marges haute et basse d’un conteneur flexible ne vont pas fusionner avec celles de ses enfants.
Axe principal et axe secondaire des boites flexibles
En plus de la distinction conteneur flexible / éléments flexibles, vous devez absolument comprendre la notion d’axe principal et d’axe secondaire des boites flexibles.
En effet, le comportement (et le résultat) de la plupart des propriétés liées au modèle des boites flexibles va être intimement lié à cette notion d’axe.
Pour le dire très simplement, deux axes vont intervenir dans le modèle des boites flexibles : l’axe horizontal et l’axe vertical.
La propriété flex-direction va nous permettre de définir quel va être l’axe principal pour un conteneur flexible et ses éléments flexibles ainsi que la direction des éléments le long de cet axe. Le deuxième axe sera ainsi appelé axe secondaire.
Par défaut, l’axe principal est l’axe horizontal (et la direction va être celle de l’écriture) et l’axe secondaire est l’axe vertical (et la direction va être de haut en bas).
Une nouvelle fois, la plupart des propriétés du flexbox vont permettre d’organiser les éléments selon un axe (certaines selon l’axe principal, d’autres selon l’axe secondaire) et selon la direction. Il va donc être essentiel de bien savoir quel est notre axe principal et quel est notre axe secondaire !
Regardez plutôt l’exemple ci-dessous pour vous en convaincre. La seule différence entre les deux conteneurs flexibles est que l’axe principal du premier défini avec flex-direction est l’axe horizontal tandis que l’axe principal du second est l’axe vertical.
See the Pen Cours HTML CSS 13.1.2 by Pierre (@pierregiraud) on CodePen.
