Guillaume Duverger - Développement & Graphisme - Blog

Flexible Box Layout & CSS Grid Layout
Vous êtes ici : Accueil Blog > Articles > CSS
Sommaire de l'article
  1. Le modèle Flexible Box Layout c'est quoi ?
    1. La propriété display et sa valeur flex
    2. Axe principal (main axis) et axe transversal (cross axis)
    3. Les lignes de début et de fin (main start - main end)
    4. La direction avec flexbox

Le modèle Flexible Box Layout c'est quoi ?

Le module des boîtes flexibles (CSS Flexible Box Layout) un modèle de disposition unidimensionnel (une dimension). Autrement dit, le module va permettre de contrôler la mise en page en fonction d'une ligne ou d'une colonne, mais pas les deux en même temps.

Concrètement, l'idée de base est de rendre un élément flexible : les éléments à l'intérieur d'un conteneur (l'élément parent) peuvent être étirés et rétrécis afin que ceux-ci s'adapent à l'espace disponible du conteneur que ce soit horizontalement ou verticalement.

En utilisant un conteneur flexible, il est également possible d'organiser, de (ré) ordonner, aligner et de répartir l'espace entre (et / ou autour) les éléments enfants. Vous pouvez ainsi modifier l'ordre visuel des éléments à l'intérieur du conteneur sans affecter leur ordre réel dans le balisage HTML.

Le modèle flexbox est une petite révolution dans la mesure où les anciens modèles de rendu permettaient seulement de gérer une seule direction. Il répond en fait aux besoins du responsive. Cela permet la création de mises en page plus adaptatives et réactives qui s'adaptent aux changements de mise en page sur différentes tailles et orientations d'écran.

La propriété display et sa valeur flex ou inline-flex

Il nous faut parler de la propriété display, nécessaire pour appliquer à un élément son modèle de disposition.

Ainsi, si l'on utilise le modèle flexbox sur un élément HTML, celui-ci devient, comme expliqué en introduction, un conteneur de type block dont le contenu est flexible.

CSS


div{

display: flex

}


div{

display: inline-flex; 

}



Tous les éléments enfants directs deviennent donc des éléments flexibles (flex items). Il est donc inutile en général de déclarer un modèle flexbox à ceux-ci. Toutefois, gardez bien en tête que le conteneur flexbox est toujours considéré comme un élément de type block (ou inline), mais dont le contenu interne, lui, est flexible.

Autrement dit, dans le flux de la page, le conteneur est considéré comme de type block. Tout ce qui se trouve en son sein est considéré comme flexible.

Comportement block versus flex

Pour vous rendre compte de la différence entre les deux modèles de disposition :

Tandis que les éléments de type block prennent toute la largeur disponible par défaut, les éléments enfants flexibles se contentent, quant à eux, de l'espace nécessaire selon leur contenu (ou leur largeur).

Plus le contenu de l'élément enfant sera grand, plus il prendra de la place (il va s'étirer) à l'intérieur de l'élément parent (le conteneur).

C'est bon pour vous ? Vous avez compris le principe d'un élément flexbox ? On continue ? Il reste beaucoup de notions à comprendre.

Axe principal (main axis) et axe transversal (cross axis) :

L'axe principal d'un conteneur flexible est l'axe principal le long duquel les éléments flexibles sont disposés. Il peut être horizontal ou vertical, cela dépendra de la direction (notion que nous aborderons par la suite).

Aussi désigné comme axe secondaire, l'axe transversal désigne le long des rangées. Cet axe est perpendiculaire à l'axe principal. Sa direction dépend de la direction de l'axe principal.

Voici un graphique pour mieux comprendre :

Les lignes de début et de fin (main start - main end)

La direction des axes est affectée par le mode d'écriture (propriété writing-mode) et la directionnalité du texte (propriété direction).

Pour exemple, si votre document est en français et que vous déclarez un élément flexbox dont la direction est une rangée, la ligne de début de l'axe principal sera située à gauche et la ligne de fin sera située à droite. Ce qui donnerait ceci en CSS :

CSS


div{

display: flex;
flex-direction: row

}

span{

direction: ltr; /* direction de gauche a droite - left to right */
writing-mode: horizontal-tb; /* valeur par défaut */

}


Inversement, si la langue est arabe ou hébreu, la ligne de début sera à droite et la ligne de fin à gauche.

Point important : les deux langues s'écrivant horizontalement, l'axe transversal est le même, c'est-à-dire la ligne de début est en haut et celle de fin en bas.

Qu'en est-il des langues qui s'écrivent de haut en bas ou de bas en haut (ou les deux) ? C'est le même principe.

A noter : avec flexbox, on ne parle plus de gauche, droite, de haut ou de bas, mais de début et de fin. C'est pourquoi est né le module CSS Logical Properties and Values Level 1 .

La direction avec Flexbox

Dans le modèle flexbox, l'axe principal est défini par défaut avec la propriété flex-direction qui possède quatre valeurs :

Cette propriété va définir la façon dont les éléments flexibles sont placés dans un conteneur flexible : elle définit l'axe principal et la direction des éléments.

En cours d'écriture...

Vous rencontrez un problème avec cet article ?

Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.

haut page