FlexBox – Notions de base

Présentation

Flexbox ou Flexible Box Layout, est un nouveau mode de mise en page dans CSS3 conçu pour la mise en page d’applications complexes et de pages Web.

Dans CSS 2.1, quatre modes de mise en page ont été définis, qui déterminent la taille et la position des boîtes en fonction de leurs relations avec les autres boîtes (Leurs proches et ancêtres): la disposition des blocs (block layout) Conçue pour la mise en page verticale des élément; La disposition en ligne ( inline layout) conçue pour la mise en page horizontale du texte dans les conteneurs à blocs (block-level containers); La disposition de table (table layout) Conçue pour la mise en page de données bidimensionnelles, sous forme de tableau; Et la mise en page positionnée (positioned layout) conçue pour un positionnement très explicite sans tenir compte des autres éléments du document.

Flexbox est similaire à la disposition des blocs, sauf qu’il manque de nombreuses propriétés pouvant être utilisées dans une mise en page de blocs, comme des flotteurs et des colonnes (floats and columns). Mais là encore, il a plus de flexibilité pour distribuer de l’espace et aligner le contenu dont les applications et les pages web plus complexes aient souvent besoin. Il résolve en plus beaucoup d’autres problèmes de mise en page auxquels nous avons essayé de trouver la solution depuis très longtemps, notamment le centrage vertical, entre autres.

Flexbox vous permet de disposer des éléments dans un conteneur, les organiser et les (re)mettre en ordre, les aligner et répartir l’espace entre (et / ou autour) d’eux, quelle que soit leur taille. Il vous permet de les rendre littéralement flexibles. Ainsi, les éléments à l’intérieur du conteneur, peuvent être étirés/rétrécis pour s’accommoder à l’espace disponible, et peuvent être dimensionnés proportionnellement les un des autres, et tout espace disponible (entre/autour d’eux), peut être réparti entre eux en fonction d’une proportion que vous devez spécifier.

En utilisant flexbox, vous pouvez également placer les éléments dans un conteneur dans les deux sen (horizontal/vertical), appelé les directions flexibles (flex directions); Vous n’êtes pas limité à une seule direction comme c’est le cas pour les autres modes de mise en page. Cela permet de créer des dispositions plus adaptables et responsives qui s’accommodent aux modifications des dispositions sur différentes tailles d’écran et orientations.

Enfin, vous pouvez modifier l’ordre visuel des éléments dans le conteneur sans affecter leur ordre réel dans le balisage. Cela signifie que vous pouvez modifier l’ordre dans lequel certains éléments apparaissent sur la page, tout en préservant leur ordre dans le balisage.

Création D’une Mise En Page Flexible: Flex Container et Les Éléments

La première étape pour commencer à utiliser Flexbox est de créer un conteneur flexible (flex container). Les enfants d’un conteneur flexible sont appelés les éléments flexibles (flex items) et sont disposés dans le conteneur flexible à l’aide des propriétés Flexbox (Flexbox properties). Certaines des propriétés Flexbox s’appliquent au conteneur, d’autres sont appliquées aux éléments flexibles.

Un conteneur flexible est créé en définissant la propriété d’affichage (display) d’un élément soit en flex ou en ligne-flex (flex et inline-flex).

.flex-container {
    display: flex;
}
/* or */
.flex-container {
    display: inline-flex;
}

display: flex

crée un conteneur flexible au niveau du bloc

display: inline-flex

crée un conteneur flexible au niveau ligne. Ce conteneur devient un contexte flexible pour ses descendants directs.

Les enfants d’un conteneur flexible (flex container), les éléments flexibles (flex items) , sont mis en page à l’aide de Flexbox. Tout élément à l’extérieur d’un conteneur flexible n’est pas affecté par la disposition Flexbox définie sur ce conteneur, et sera rendu normalement dans la page.

Concepts & Terminologie

Avant de parcourir les propriétés Flexbox qui contrôlent et personnalisent la mise en page Flexbox, il existe deux concepts et  termes dont vous devez vous familiariser d’abord: axes flexibles et lignes flexibles (flex axes & flex lines).

Flex Axes

Contrairement à la disposition en bloc et en ligne, dont la mise en page est basée sur les instructions de flux en bloc et en ligne, Flexbox est basée sur les directions flexibles.

Le concept de directions flexibles (flex directions)est basé sur le concept d’axes qui déterminent les directions dans lesquelles les éléments flexibles (flex items) sont posés. L’illustration suivante montre les axes définis sur un conteneur flexible:

Selon les valeurs des propriétés Flexbox, les éléments flexibles (flex items) seront disposés dans un conteneur flexible suivant l’axe principal (main axis) ou l’axe croisé (cross axis).

• L’axe principal d’un conteneur flexible est l’axe essentiel (main axis) le long duquel les éléments flexibles sont disposés. Il s’étend dans la dimension principale.
• Les éléments flexibles sont placés dans le conteneur en commençant du côté du début principal (main start) et se dirigent vers le côté fin principal (main end).
• La largeur ou la hauteur d’un élément flexible, selon la dimension principale, est la taille principale de l’élément. La propriété de taille principale de l’élément flexible est soit la propriété de largeur ou de hauteur, selon la dimension principale.
• L’axe perpendiculaire à l’axe principal s’appelle l’axe croisé (cross axis) . Il s’étend dans la dimension croisée.
• La largeur ou la hauteur d’un élément flexible, selon la dimension croisée, est la taille croisée de l’élément. La propriété de taille croisée est la largeur ou la hauteur qui est dans la dimension croisée.
• Les lignes flexibles (voir la section suivante ci-dessous) sont remplies d’éléments et placées dans le conteneur en commençant par le côté de début croisé du conteneur flexible et en se dirigeant vers le côté fin croisée.

Il est nécessaire que vous vous familiarisiez avec ces concepts avant de commencer à utiliser Flexbox. Tout y est relatif à ces deux axes.

Flex Lines

Les éléments flexibles dans un conteneur flexible sont disposés et alignés dans les lignes flexible (flex lines)s, une ligne hypothétique utilisée pour le regroupement et l’alignement des éléments flexibles à l’intérieur de leur conteneur. Les lignes flexibles suivent l’axe principal. Un conteneur flexible peut être soit une ligne ou multi-lignes, selon la propriété de l’enveloppe flexible (flex-wrap):

• Un conteneur flexible à une seule ligne (single-line flex container) définit tous ses enfants en une seule ligne, même si cela entraînerait un débordement de son contenu.
• Un conteneur flexible multi-lignes (multi-line flex container) réparti ses éléments flexibles à travers plusieurs lignes, identique à la façon dont un texte se casse pour prendre une nouvelle ligne lorsqu’il devient trop large pour correspondre à la ligne existante. Lorsque des lignes supplémentaires sont créées, elles sont empilées dans le conteneur flexible le long de l’axe croisé en fonction de la propriété Flex-Wrap. Chaque ligne contient au moins un élément flexible, à moins que le conteneur flexible lui-même ne soit complètement vide.

Modes d’Écriture

L’illustration ci-dessus suppose que le mode d’écriture est de gauche à droite . La ligne flexible (flex lines) suit la direction du texte qui, est de gauche à droite, de haut en bas.

Toutefois, si vous modifiez la direction du texte à l’aide de la propriété direction, la direction de la ligne flexible (flex lines) changera également, en changeant la direction des éléments flexibles (flex items).

En outre, si le mode d’écriture change, les directions de l’axe principal (main axis)  et de l’axe croisé (cross axis) changent également. Par exemple, dans une mise en page en langue japonaise, axe principal (main axis) est vertical et l’axe croisé (cross axis) est horizontal. Consultez la section de la propriété de flex-flow pour voir l’exemple.