La mise en page web est une application clé du CSS.

La solution traditionnelle de mise en page est basée surle modèle de boîte, en s'appuyant surdisplaypropriété +positionpropriété +floatpropriétés. C’est très peu pratique pour des mises en page spéciales, telles que,centrage verticalce qui n’est pas facile à réaliser.

En 2009, le W3C a proposé une nouvelle solution — la mise en page Flex — qui peut mettre en œuvre diverses mises en page simplement, complètement et de manière responsive. Actuellement, elle est prise en charge par tous les navigateurs, ce qui signifie que vous pouvez utiliser cette fonctionnalité en toute sécurité dès maintenant.

La mise en page Flex deviendra la solution privilégiée pour la mise en page à l’avenir. Cet article présente la syntaxe de la mise en page Flex.

Le contenu suivant fait principalement référence à ces deux articles :Guide complet de FlexboxetGuide visuel des propriétés Flexbox CSS3。

1. Qu’est-ce que la mise en page Flex ?

Flex est l’abréviation de Flexible Box, signifiant « mise en page flexible », utilisé pour offrir une flexibilité maximale au modèle de boîte.

N’importe quel conteneur peut être spécifié comme une mise en page Flex.

.box{
  display: flex;
}

Les éléments en ligne peuvent aussi utiliser la mise en page Flex.

.box{
  display: inline-flex;
}

Les navigateurs avec le noyau Webkit doivent ajouter le préfixe -webkit.

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

Notez qu’après avoir défini une mise en page Flex, les propriétés float, clear et vertical-align des éléments enfants deviennent invalides.

2. Concepts de base

Les éléments qui adoptent une mise en page Flex sont appelés conteneurs Flex (flex container), abrégés en « conteneur ». Tous ses éléments enfants deviennent automatiquement des membres du conteneur, appelés éléments Flex (flex item), abrégés en « élément ».

Par défaut, le conteneur possède deux axes : l'axe principal horizontal (main axis) et l'axe transversal vertical (cross axis). La position de début de l'axe principal (l'intersection avec la bordure) est appelée main start, et la position de fin est appelée main end ; la position de début de l'axe transversal est appelée cross start, et la position de fin est appelée cross end.

Par défaut, les éléments sont disposés le long de l'axe principal. L'espace sur l'axe principal occupé par un seul élément est appelé main size, et l'espace sur l'axe transversal occupé est appelé cross size.

3. Propriétés du conteneur

Les 6 propriétés suivantes sont définies sur le conteneur.

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

3.1 Propriété flex-direction

La propriété flex-direction détermine la direction de l'axe principal (c'est-à-dire la direction dans laquelle les éléments sont disposés).

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

Elle peut prendre 4 valeurs.

• row (par défaut) : l'axe principal est horizontal, en partant de la gauche.
• row-reverse : l'axe principal est horizontal, en partant de la droite.
• column : l'axe principal est vertical, en partant du haut.
• column-reverse : l'axe principal est vertical, en partant du bas.

3.2 propriété flex-wrap

Par défaut, les éléments sont disposés sur une seule ligne (également appelée « axe »). La propriété flex-wrap définit comment passer à la ligne si un axe ne peut pas contenir tous les éléments.

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Elle peut prendre trois valeurs.

(1) nowrap (par défaut) : aucun retour à la ligne.

(2) wrap : retour à la ligne, première ligne en haut.

(3) wrap-reverse : retour à la ligne, première ligne en bas.

3.3 flex-flow

La propriété flex-flow est un raccourci pour la propriété flex-direction et la propriété flex-wrap, avec une valeur par défaut de row nowrap.

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 propriété justify-content

La propriété justify-content définit l'alignement des éléments sur l'axe principal.

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

Elle peut prendre 5 valeurs. L'alignement précis dépend de la direction de l'axe. Ce qui suit suppose que l'axe principal va de gauche à droite.

• flex-start (par défaut) : aligné à gauche.
• flex-end : aligné à droite
• center : centré
• space-between : aligné aux deux extrémités, avec un espacement égal entre les éléments.
• space-around : l'espacement des deux côtés de chaque élément est égal. Par conséquent, l'espacement entre les éléments est deux fois l'espacement entre les éléments et la bordure.

3.5 propriété align-items

La propriété align-items définit comment les éléments sont alignés sur l'axe transversal.

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

Elle peut prendre 5 valeurs. L'alignement spécifique est lié à la direction de l'axe transversal. Ce qui suit suppose que l'axe transversal va du haut vers le bas.

• flex-start : aligné au début de l'axe transversal.
• flex-end : aligné à la fin de l'axe transversal.
• center : aligné au centre de l'axe transversal.
• baseline : aligné sur la ligne de base de la première ligne de texte de l'élément.
• stretch (par défaut) : si aucune hauteur n'est définie pour l'élément ou si elle est définie sur auto, il remplira toute la hauteur du conteneur.

3.6 propriété align-content

La propriété align-content définit l'alignement de plusieurs axes. Si les éléments n'ont qu'un seul axe, cette propriété n'a aucun effet.

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

Cette propriété peut prendre 6 valeurs.

• flex-start : aligné avec le début de l'axe transversal.
• flex-end : aligné avec la fin de l'axe transversal.
• center : aligné avec le centre de l'axe transversal.
• space-between : aligné avec les deux extrémités de l'axe transversal, avec des intervalles entre les axes répartis uniformément.
• space-around : l'intervalle de part et d'autre de chaque axe est égal. Par conséquent, l'intervalle entre les axes est le double de l'intervalle entre les axes et la bordure.
• stretch (par défaut) : l'axe remplit tout l'axe transversal.

4. Propriétés des éléments

Les 6 propriétés suivantes sont définies sur les éléments.

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

4.1 propriété order

La propriété order définit l'ordre dans lequel les éléments sont disposés. Plus la valeur est petite, plus l'élément est placé tôt. La valeur par défaut est 0.

.item {
  order: <integer>;
}

4.2 propriété flex-grow

La propriété flex-grow définit la proportion dans laquelle un élément peut s'agrandir, avec une valeur par défaut de 0, ce qui signifie que même s'il reste de l'espace, il ne s'agrandira pas.

.item {
  flex-grow: <number>; /* default 0 */
}

Si tous les éléments ont une propriété flex-grow de 1, ils se partageront équitablement l'espace restant (s'il y en a). Si un élément a une propriété flex-grow de 2 et que les autres ont 1, le premier occupera deux fois plus d'espace restant que les autres.

4.3 propriété flex-shrink

La propriété flex-shrink définit la proportion dans laquelle un élément peut rétrécir, avec une valeur par défaut de 1, ce qui signifie que si l'espace est insuffisant, l'élément rétrécira.

.item {
  flex-shrink: <number>; /* default 1 */
}

Si tous les éléments ont une propriété flex-shrink de 1, ils rétréciront proportionnellement lorsque l'espace est insuffisant. Si un élément a une propriété flex-shrink de 0 et que les autres ont 1, le premier ne rétrécira pas lorsque l'espace est insuffisant.

Les valeurs négatives ne sont pas valides pour cette propriété.

4.4 propriété flex-basis

La propriété flex-basis définit l'espace sur l'axe principal (dimension principale) occupé par un élément avant la répartition de l'espace supplémentaire. Le navigateur calcule s'il y a de l'espace supplémentaire sur l'axe principal en fonction de cette propriété. Sa valeur par défaut est auto, qui correspond à la taille d'origine de l'élément.

.item {
  flex-basis: <length> | auto; /* default auto */
}

Elle peut être définie sur une valeur comme celle de la propriété width ou height (par exemple, 350px), et l'élément occupera un espace fixe.

4.5 propriété flex

La propriété flex est un raccourci pour flex-grow, flex-shrink et flex-basis, avec une valeur par défaut de 0 1 auto. Les deux dernières propriétés sont facultatives.

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Cette propriété a deux valeurs raccourcies : auto (1 1 auto) et none (0 0 auto).

Il est recommandé d'utiliser d'abord cette propriété, plutôt que d'écrire trois propriétés séparées, car le navigateur calculera les valeurs associées.

4.6 propriété align-self

La propriété align-self permet à un seul élément d'avoir un alignement différent de celui des autres éléments, et peut surcharger la propriété align-items. La valeur par défaut est auto, ce qui signifie hériter de la propriété align-items de l'élément parent ; s'il n'y a pas d'élément parent, elle équivaut à stretch.

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Cette propriété peut prendre 6 valeurs. Hormis auto, les autres sont exactement les mêmes que la propriété align-items.

Source : http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html