CSS>Flex -
Publié le : 26-03-2015 | Modifié le :

Display: flex

Cette propriété css permet d'agencer les pages html de manière dynamique, voir la référence W3C: CSS Flexible Box Layout Module Level 1. Permettant de mieux contrôler le flux des balises qui composent les pages HTML, notamment lorsque vous faites un design dit "responsive".
Pour ma part, je n'utilise plus que cette méthode, car elle est efficace contrairement à display:table, plus simple, mais qui pose trop de problèmes pour la gestion des margin, padding ....
Cependant flex n'est pas supporté par tous les navigateurs, en particulier la série IE<10. Pour les mobiles c'est le navigateur webkit android qui posera problème, car il n'implémente que la vieille version display:box, qui n'est plus validée par le validateur CSS du W3C.

1 Les bases

Il faut distinguer deux éléments principaux dans cette propriétés, le container et ses items.
Le container permet de disposer les items(en colonnes, en lignes, en multilignes, inversé...
Et les items quand à eux auront des propriétés qui définiront leurs apparences dans le container (ordre d'apparence, largeur ,flottement ...).

2 Display: flex les propriétés

(Source, W3C).

2.1 Flex containers

display (afficher): La propriété CSS flex permet à un élément flex de modifier ses dimensions afin de remplir l’espace disponible. Les éléments flex peuvent être distendus jusqu’à un espace de taille proportionnelle à leur ratio d’extension (ou de compression) flex.
SOURCE: MDN; display: box(2009) | -webkit-box | flexbox(2011) | -webkit-flex | -moz-flex | -ms-flex | flex(FINAL);

flex-direction (sens): La propriété CSS flex-direction précise comment les éléments flexibles sont placés dans le conteneur(en colonne ou en ligne).; flex-direction: row | row-reverse | column | column-reverse;; défaut: row

flex-wrap (enveloppe): La propriété CSS flex-wrap précise si les éléments doivent être disposé sur une ligne ou en multilignes; flex-wrap: nowrap | wrap | wrap-reverse;; défaut: nowrap

flex-flow (flux): La propriété CSS flex-flow est un raccourci pour les propriétés individuelles, flex-direction et flex-wrap .; flex-flow: <flex-direction> || <flex-wrap>; défaut: voir propriétés individuelles

align-content(aligner contenu): La propriété align-content CSS aligne les lignes d'un conteneur flexible dans le conteneur flexible quand il y a un espace supplémentaire sur l'axe transversal. Cette propriété n'a aucun effet sur une seule ligne (seulement en multi-lignes).; align-content: flex-start | flex-end | center | space-between | space-around | stretch;; défaut: stretch

justify-content (justifier le contenu horizontalement): La propriété CSS justifie-content définit la façon dont un navigateur distribue l'espace disponible entre et autour les éléments lors de l'alignement des éléments flexibles dans le principal axe de la ligne actuelle.; justify-content: flex-start | flex-end | center | space-between | space-around;; défaut: flex-start

align-items (alignement vertical articles): La propriété CSS align-items aligne les éléments flexibles de la ligne actuelle flex de la même manière que justify-content, mais dans la direction perpendiculaire.; align-items: flex-start | flex-end | center | baseline | stretch;; défaut: stretch

2.2 Flex items

order: La propriété CSS order spécifie l'ordre utilisé pour disposer les éléments flexibles dans leur container. Les éléments sont disposés par ordre de valeur croissant. Les éléments ayant la même valeur d'ordre sont affichés selon l'ordre d'apparition du code source.; order: <integer>;; défaut: 0

flex: La propriété CSS flex est un raccourci précisant la capacité d'un élément flexible pour modifier ses dimensions pour remplir l'espace disponible. Les items peuvent être étirés pour utiliser l'espace disponibles pour le facteur flex-grow(étirer) ou le facteur flex-shrink (réduction), pour éviter le débordement.; flex: none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ];; défaut: voir propriétés individuelles; Remarque: Si <‘flex-basis’> est réglé sur auto le validateur CSS du W3C le considère comme une erreur.

flex-grow (étirer): La propriété CSS flex-grow spécifie le facteur de grossissement d'un item.; flex-grow: <number>;; défaut: 0

flex-shrink (réduction): La propriété CSS flex-shrink spécifie le facteur de réduction d'un item.; flex-shrink: <number>;; défaut: 1

flex-basis: La propriété CSS flex-basis spécifie la base qui est la taille initiale d'un item. La propriété détermine la taille de la boîte de contenu, sauf indication contraire en utilisant box-sizing.; flex-basis: main-size | <‘width’>(em, px, auto) | content |inherit;; défaut: main-size

align-self: la propriété CSS align-self aligne les éléments flexibles de la ligne actuelle. Si la propriété align-items du container est définie, alors align-self est ignoré.; align-self: auto | flex-start | flex-end | center | baseline | stretch;; défaut: auto

2 Exemple

Note: Internet Explorer ne supporte pas la propriété resize: both;.
Pour Firefox et Chrome-like le coin en bas à droite, appuyer et resizer.

.flex0{
width:10%;
resize: both;
overflow: auto;
display: -moz-box;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-moz-box-orient: block-axis; -webkit-box-orient: block-axis;
-webkit-flex-flow: row; -ms-flex-flow: row;
flex-flow: row;
flex-wrap: wrap;
-moz-box-pack: start; -webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.flex0 li{
-moz-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1; -ms-flex: 1;
flex: 1;
min-width: 3em;
min-height: 3em;
display:block;
border:2px solid black;
background:green;
text-align:center;
vertical-align:middle;
margin:0;
padding:0;
}

Les références

: CSS-TRICKS: A Complete Guide to Flexbox. Un article en anglais, très bien documenté. Avec deux colonnes une pour le container et l'autre pour les items.; Toujours chez CSS-TRICKS: flex, la sous propriété abrégées pour les items, à lire car elle est plus complexe à implémenter. De plus dans cette article il est fait référence à la compatibilité avec certains vieux navigateurs. (Voir display: -webkit-box); CSS Flexbox Please! Un petit générateur de flexbox, avec le code très pratique pour expérimenter et comprendre le fonctionnement de flexbox.; html5rocks: Quick hits with the Flexible Box Model, un article dédié à display: -webkit-box. Si vous dévelopez sous android 4.2 pour le navigateur par défaut cette article sera TRÈS UTILE.; isotoma: CSS3 Flexbox, un autre article dédié à display: -webkit-box, avec des exemples.; Un autre exemple complet chez devoprera.com Advanced Cross-Browser Flexbox, article bien détaillé.; An Introduction to the CSS Flexbox Module et ses exemples CSS Flexbox Examples: