Télécharger le PDF du cours
Pour disposer nos éléments flexibles, il va déjà falloir définir un axe de direction des éléments principal et un axe secondaire.
Pour définir l’axe principal, nous allons pouvoir utiliser la propriété flex-direction ou la version raccourcie flex-flow en les appliquant au conteneur flexible.
L’objectif de cette leçon est de bien comprendre cette notion d’axe et d’apprendre à modifier la direction des éléments flexibles.
L’axe principal et la propriété flex-direction
La propriété flex-direction nous permet de définir l’axe principal des éléments flexibles. Nous allons utiliser cette propriété sur notre conteneur flexible.
Nous allons pouvoir choisir parmi les valeurs de direction suivantes :
row: Valeur par défaut. L’axe principal est l’axe horizontal et les éléments flexibles vont se placer en ligne, dans le sens de la lecture (de gauche à droite pour un français) ;row-reverse: L’axe principal est l’axe horizontal et les éléments vont se placer en ligne. Cette fois-ci, les éléments se placent dans le sens inverse de la lecture ;column: L’axe principal est l’axe vertical et les éléments vont se placer en colonne, en partant du début du conteneur vers la fin (du haut vers le bas par défaut) ;column-reverse: L’axe principal est l’axe vertical et les éléments vont se placer en colonne, en partant de la fin du conteneur vers le début (du bas vers le haut par défaut).
Prenons immédiatement un premier exemple pour illustrer cela :
See the Pen Cours HTML CSS 13.2.1 by Pierre (@pierregiraud) on CodePen.
Nous définissons ici 4 conteneurs flexibles. Les conteneurs flexibles sont à priori identiques et contiennent chacun 3 éléments désormais flexibles par définition.
Nous passons ensuite une valeur de flex-direction différente à chaque conteneur flexible pour définir la direction des éléments flexibles et également l’axe principal.
Pour nos deux premiers conteneurs, l’axe principal sera l’axe horizontal. Les éléments flexibles vont ainsi se positionner en ligne, les uns à côté des autres.
Avec la valeur row, les éléments suivent le sens de la lecture : les éléments se positionnent de gauche à droite avec le premier élément flexible tout à gauche, puis le deuxième à sa droite et etc.
Avec la valeur row-reverse, les éléments se positionnent selon le sens inverse à la lecture : le premier élément sera positionné à droite, le deuxième à sa gauche et etc.
Pour nos deux derniers conteneurs flexibles, l’axe principal sera l’axe vertical. Les éléments flexibles vont ainsi se positionner en colonne, les uns au-dessous des autres.
La valeur column va faire se positionner les éléments à partir du début (haut) du conteneur et vers la fin (bas) de celuici. Ainsi, le premier élément flexible sera en haut du conteneur, le deuxième sera en dessous du premier et etc.
Avec la valeur column-reverse, les éléments flexibles vont continuer de se positionner en colonne mais à partir de la fin du conteneur et vers le début.
Gérer les dépassements des éléments flexibles du conteneur
Dans l’exemple précédent, j’ai choisi les dimensions de mes différents éléments de façon à ce que les éléments flexibles ne dépassent pas de leur conteneur.
Cependant, vous devez savoir que si les éléments flexibles occupent plus de place selon leur axe principal que leur conteneur, alors ils vont par défaut dépasser de celui-ci.
Cela est dû au fait que les éléments flexibles n’ont pas le droit par défaut d’aller à la ligne (si l’axe principal est l’axe horizontal) ou de se placer sur une autre colonne (si l’axe principal est l’axe vertical).
See the Pen Cours HTML CSS 13.2.2 by Pierre (@pierregiraud) on CodePen.
Dans l’exemple précédent, j’ai défini une dimension par défaut pour chacun de mes éléments flexibles égale à 35% de la taille du conteneur avec la propriété flex que nous étudierons plus tard.
Pour comprendre l’exemple ci-dessus, vous devez savoir que le flex : 0 0 35% va définir la largeur des éléments flexibles si l’axe principal est l’axe horizontal ou la hauteur de ces éléments si l’axe principal est l’axe vertical.
J’ai également ici défini une hauteur fixe pour nos deux conteneurs dont l’axe principal est l’axe vertical car sinon les éléments ne pourraient jamais dépasser. En effet, je vous rappelle que par défaut la hauteur d’un élément va dépendre de celle de ses enfants sauf si une hauteur explicite est précisée.
Nous avons donc finalement ici des éléments flexibles qui sont plus grands que leur conteneur (selon leur axe principal) et qui vont donc par défaut dépasser de celui-ci.
Pour éviter ce comportement souvent non souhaité, nous allons pouvoir utiliser la propriété flex-wrap qui va pouvoir donner la possibilité aux éléments flexibles d’aller à la ligne ou en colonne s’ils dépassent de leur conteneur.
Cette propriété va à nouveau s’appliquer au conteneur et accepte les valeurs suivantes :
nowrap: Valeur par défaut. Les éléments vont rester sur la même ligne ou sur la même colonne (selon leur axe principal) ;wrap: Les éléments qui dépassent du conteneur vont avoir la possibilité d’aller à la ligne ou de se positionner sur une nouvelle colonne à partir du début du conteneur et en allant vers la fin de celui-ci (de haut en bas ou de gauche à droite par défaut);wrap-reverse: Les éléments qui dépassent du conteneur vont avoir la possibilité d’aller à la ligne ou de se positionner sur une nouvelle colonne à partir cette fois-ci de la fin du conteneur et en allant vers le début (de bas en haut ou de droite à gauche par défaut).
See the Pen Cours HTML CSS 13.2.3 by Pierre (@pierregiraud) on CodePen.
La direction des éléments de mon premier conteneur est définie avec flex-direction : row et on laisse la possibilité aux éléments d’aller à la ligne en partant du début du conteneur vers la fin avec flex-wrap : wrap. L’élément qui dépasse va donc être placé sous les autres, sur la gauche.
La direction des éléments du deuxième conteneur est également définie avec flex-direction : row mais cette fois-ci on laisse la possibilité aux éléments d’aller à la ligne en partant de la fin du conteneur vers le début avec flex-wrap : wrap-reverse.
Selon l’axe horizontal, le « début » du conteneur est sa première ligne tandis que la « fin » du conteneur est sa dernière ligne. Les éléments vont donc ici se positionner à partir du bas du conteneur et les éléments qui dépassent vont se positionner au-dessus.
La direction des éléments des troisième et quatrième conteneurs est définie avec flex-direction : row-reverse : les éléments vont se positionner en ligne à partir de la droite et vers la gauche.
On applique un flex-wrap : wrap à notre troisième conteneur, ce qui fait que les éléments vont pouvoir se positionner sur plusieurs lignes en partant du haut du conteneur et en allant vers le bas. Les éléments qui dépassent vont donc être renvoyés sur la ligne du dessous.
On applique un flex-wrap : wrap-reverse à notre troisième conteneur, ce qui fait que les éléments vont pouvoir se positionner sur plusieurs lignes en partant du bas du conteneur. Les éléments qui dépassent vont être renvoyés vers le haut du conteneur, sur une ligne supérieure.
Le même principe va s’appliquer pour les éléments des conteneurs flexibles dont la direction est définie avec column ou column-reverse.
Ici, la valeur wrap de la propriété flex-wrap va permettre aux éléments qui dépassent de se positionner sur une nouvelle colonne, en partant de la gauche et en allant vers la droite. Les éléments qui dépassent vont donc être renvoyés sur d’autres colonnes à droite des premiers éléments.
La valeur wrap-reverse va elle nous permettre de renvoyer les éléments qui dépassent sur une nouvelle colonne à gauche des premiers éléments.
La notation raccourcie flex-flow
Les deux propriétés flex-direction et flex-wrap peuvent être abrégées grâce à la propriété raccourcie flex-flow.
Si une valeur est omise, alors la valeur par défaut de la propriété correspondante sera utilisée à savoir row pour flex-direction et nowrap pour flex-wrap.
See the Pen Cours HTML CSS 13.2.4 by Pierre (@pierregiraud) on CodePen.
L’ordre d’affichage des éléments flexibles dans le conteneur
En plus de définir une direction pour les éléments de notre conteneur flexible, nous allons également pouvoir choisir leur ordre d’affichage élément par élément grâce à la propriété order.
Nous allons appliquer order aux éléments flexibles et non au conteneur et allons pouvoir lui passer un nombre.
La valeur de order d’un élément va être comparée à celle des autres et l’élément possédant la plus petite valeur sera affiché en premier, celui possédant la deuxième plus petite valeur en deuxième et etc.
La valeur par défaut de order est 0 et si plusieurs éléments possèdent la même valeur pour leur propriété order ils seront affichés selon l’ordre d’écriture du code.
See the Pen Cours HTML CSS 13.2.5 by Pierre (@pierregiraud) on CodePen.
Ici, nous avons deux conteneurs flexibles identiques possédant chacun 5 éléments. La seule différence entre nos deux conteneurs va être la direction de leur axe principal : l’axe principal de notre premier conteneur est horizontal selon une direction qui suit le sens de l’écriture (gauche à droite pour moi) tandis que l’axe principal de notre deuxième conteneur est horizontal selon une direction contraire au sens de l’écriture.
A chaque fois, on attribue un order : 4 au premier élément des conteneurs, un order : 2 au deuxième élément et un order : -1 au quatrième élément.
On ne définit pas de valeur pour la propriété order pour nos troisième et cinquième éléments. La valeur par défaut, 0, sera donc utilisée.
L’élément qui possède la valeur la plus petite pour sa propriété order est donc le quatrième élément qui sera affiché en premier puis vont suivre dans l’ordre d’écriture dans le code les troisième et cinquième élément puis le deuxième et enfin le premier.
Notez bien ici que l’ordre des éléments va dépendre de la direction de l’axe du conteneur flexible : pour notre deuxième conteneur, le début du conteneur se situe à droite et la fin à gauche. Le premier élément va donc s’afficher à droite, le deuxième à sa gauche et ainsi de suite vers la gauche.
