Aller au contenu

Flexbox

Flexbox est une série de propriétés CSS dont le but est de faciliter la mise en page, l'alignement et la distribution de l'espace entre des items d'un "container".

Le "container" à le pouvoir de redimensionner ses items selon l'espace disponible. Utiliser Flexbox est donc une méthode efficace pour créer des pages web "responsive", qui s'adaptent au différent support avec laquelle on la consulte.

On va utiliser Flexbox pour la mise en page de petite section de nos site, un menu, une section de titre, etc. Pour la disposition plus globale, il y a d'autres méthodes plus appropriées comme Grid que nous verrons ultérieurement.

Définition

L'idée générale de Flexbox est qu'on englobe le contenu avec lequel on veut travailler dans un conteneur (container). Les éléments qui se retrouvent dans le conteneur, les items, seront affecté par les propriétés du conteneur et aussi par des règles propres à eux.

Attention

Seulement les enfants immédiats du conteneur parent sont affectés.

Voici un schéma qui résume la disposition des éléments :

css-flexbox01.png

Les propriétés du conteneur

display

Pour déterminer que l'élément est un conteneur flexbox. Cette propriété va nous permettre d'utiliser les autres propriétés flexbox sur cet élément et tous ses enfants.

.container_titre {
    display: flex;
}

flex-direction

C'est avec cette propriété qu'on va définir le sens de distribution des items. Les valeurs possibles sont :

  • row: par défaut, en ligne de gauche à droite
  • row-reverse : en ligne, de droite à gauche
  • column : de haut en bas (en colonne)
  • column : de bas en haut
.container_titre {
    flex-direction: row-reverse;
}

justify-content

justify-content permet de définir l'alignement des items suivant le main-axis.

  • flex-start : par défaut, les items sont alignés au début selon le sens de flex-direction.
  • flex-end : Les items sont aligné à la fin selon le sens de flex-direction
  • center : Les items sont centrés
  • space-between : Le premier et dernier items sont alignés respectivement au début et à la fin, les autres items sont distribués de façon égale sur la ligne.
  • space-around : Les items sont distribué uniformément le long de l'axe et un espace égale au début et à la fin.
  • space-evenly : Les items sont distribuéé pour que l'espace entre chaque soit la même.

source

align-items

Détermine comment les items seront alignés selon l'axe secondaire (cross axis).

  • stretch : par défaut, les items seront étirés pour remplir l'espace disponible dans le conteneur
  • flex-start : les items sont alignés au début de l'axe secondaire
  • flex-end : les items sont alignés à la fin de l'axe secondaire
  • center : les items sont centrés selon l'axe secondaire

css-flexbox02

source

align-content

Cette propriété est effective seulement quand il y a plusieurs lignes d'items dans le conteneur. C'est un peu le même principe que pour la propriété justify-content mais au niveau de l'axe secondaire (cross axis). Les valeurs possibles sont sensiblement les mêmes : flex-start, flex-end, center, space-between, space-around et space-evenly.

css-flexbox04

source

flex-wrap

Les items vont par défaut essayer de tenir sur la même ligne. On peut changer ce comportement et permettre au items de pouvoir "wraper" quand c'est nécessaire.

flex-flow

La propriété flex-flow est un raccourci pour définir les propriétés flex-direction et flew-wrap dans une seule ligne.

/* Au lieu d'écrire ceci */
flex-direction: row-reverse;
flex-wrap: wrap;
/* on peut résumé par cette ligne */
flex-flow: row-reverse wrap;

Les propriétés des items

flex-grow

Définie la capacité pour un item de s'agrandir quand c'est nécessaire. La propriété indique quel quantité d'espace "restant" du conteneur l'item peut utiliser pour s'agrandir. La valeur de la propriété est un entier positif sans unité de mesure qui représente une proportion. Si j'ai par exemple trois items et que je leur défini la propriété flex-grow à 1, les trois items auront la même dimension. Par contre si un des items à une valeur de 2 et les autres 1, le premier item sera 2 fois plus grand que les deux autres.

css-flexbox05

flex-shrink

Quand la taille de tous les items est plus grande que leur conteneur, les items peuvent retrécir pour qu'ils soient ajuster au conteneur. Le facteur de rétrécissement est indiqué par la valeur de la propriété flex-shrink. Par défaut la valeur est 1 et une valeur de 0 indique que la taille de l'item ne peut être diminuée.

flex-basis

Détermine la taille par défaut d'un élément avant que l'espace disponible ne soit distribué. La valeur peut être une unité de mesure ou un mot-clé.

flex

C'est un raccourci pour les propriétés flex-grow, flex-shrink et flex-basis. Ces deux derniers sont optionnel, on peut spécifié uniquement une valeur pour flex-grow.

flex: 2 1 25%
/* est équivalent à */
flex-grow: 2;
flex-shrink: 1;
flex-basis: 25%;

align-self

Permet d'outrepasser l'alignement par défaut pour un item. Les valeurs possible sont les mêmes que pour align-items.

#item3 {
    align-self: flex-end;
}

css-flexbox03

source

Tutoriel sous forme de jeux

Sources et références