Une nouveauté pour faciliter le "responsive design"

Le positionnement par flexbox permet de placer les différents éléments d'une page web là où l'on souhaite, horizontalement et verticalement. En outre on peut aussi avec cette technique décider de l'ordre et de la taille relative de chaque élément, ce qui devient très intéressant pour adapter son site à des dispositifs mobiles.

Le conteneur principal qui contiendra les éléments que l'on souhaite disposer devra être doté de la propriété css :
display : flex;
ou bien
display : inline-flex; (pour des éléments en ligne).

Distribution

Pour déterminer la direction dans laquelle s'empileront les différents éléments de notre page, nous utiliserons la propriété :
flex-direction : row; pour une disposition horizontale
: column; pour une disposition verticale
: row-reverse; pour une disposition horizontale à l'envers
: column-reverse; pour une disposition verticale à l'envers

Nous allons ensuite décider si les éléments doivent occuper toute la place disponible, ou bien aller à la ligne si la largeur vient à manquer.
flex-wrap : no-wrap; Les éléments prennent toute la place (par défaut).
: wrap; passage à la ligne si manque de place
: wrap-reverse; passage à la ligne et inversion.

Alignement

Axe principal

Pour décider comment se positionneront les différents éléments dans l'axe principal (horizontal si nous avons choisi "flex-direction:row" ou vertical pour "flex-direction:column;"), nous utiliserons la propriété :
justify-content : center; pour tout centrer
Les autres valeurs que peut prendre la propriété "justify-content" sont :
: flex-start; les éléments se placent au début
: flex-end;les éléments se placent à la fin
: space-between; les éléments s'étalent dans tout l'espace disponible
: space-around; les éléments sont entourés d'espace

Axe secondaire

Pour décider comment se positionneront les différents éléments dans l'axe secondaire (vertical si nous avons choisi "flex-direction:row" ou horizontal pour "flex-direction:column;"), nous utiliserons la propriété :
align-items : center; pour tout centrer
Les autres valeurs que peut prendre la propriété "align-items" sont :
: flex-start; les éléments se placent au début
: flex-end;les éléments se placent à la fin
: space-between; les éléments s'étalent dans tout l'espace disponible
: space-around; les éléments sont entourés d'espace

Ordonnancement des éléments

Pour fixer la taille initiale d'un élément, on donne une valeur en pixel à la propriété
flex-basis

Pour moduler la capacité d'un élément à s'étirer dans l'espace restant, on fixe à 1 la propriété
flex-shrink

Pour moduler la capacité d'un élément à se contracter si nécessaire, on fixe à 1 la propriété
flex-grow

Enfin, on peut affecter une pondération aux différents éléments pour décider de leur ordre. Les éléments dont la valeur est la plus forte se trouveront en bas de la pile.
order