Dans cette feuille de style, nous avons commencé par créer le conteneur. Flexbox permet d’ajouter la mention « display: flex; ». Comme nous n’avons pas donné de précision particulière, les éléments sont disposés les uns après les autres, de gauche à droite. Grâce à la propriété « justify-content », vous disposez de 5 différentes manières de disposer les items.
- flex-start : aligné à gauche
- flex-end : aligné à droite
- center : centré
- space-around : répartis sur la ligne avec un espacement égal autour de chacun
- space-between : répartis sur la ligne avec un espacement égal entre chacun
Le reste du code n’a qu’une valeur « cosmétique » et n’a en fait aucun lien avec les conteneurs flexibles.
Avec Flexbox, les CSS ont par défaut une orientation horizontale. Il est cependant possible d’aligner les éléments en colonne. On peut aussi inverser la direction, c’est-à-dire aller de gauche à droite ou de bas en haut. Pour ce faire, on utilise la propriété « flex-direction » :
- row : de gauche à droite
- row-reverse : de droite à gauche
- column : de haut en bas
- column-reverse : de bas en haut
La propriété « justify-content: flex-end; » n’est pas la même que « flex-direction: row-reverse; ». Alors qu’avec la première variante, le dernier élément est positionné complètement à droite, la deuxième variante modifie toute la disposition. Le premier élément dans le code apparaitrait complètement à droite.