Flexbox Layout, où comment rendre son design (plus) flexible

Flexbox CSS, ou Flexible Boxes, est un modèle de mise en page des éléments HTML. Il peut être mis en place pour prendre en charge un modèle de page à part entière, ou être associé à d’autres techniques, comme le Responsive Web Design.

Le concept principal des Flexbox est de donner la possibilité à l’élément parent (que l’on nommera par la suite le container ou flex container) de modifier la taille des éléments enfants (que l’on nommera items ou flex items) pour remplir au mieux l’espace disponible, en fonctions des directives qu’on lui donne (des propriétés CSS propre au module flexbox).

Cela devient intéressant pour les webdesigners et les intégrateurs HTML, alors que les sites internet sont consultés sur des plateformes avec des tailles de plus en plus différentes (consulter ce site pour voir la liste des résolution possibles), c’est qu’un flex container peut élargir les items pour remplir l’espace libre, ou, au contraire, les rétrécir pour éviter tous débordements. Si l’on associe à cela plusieurs propriétés CSS qui permettent de définir le sens d’affichage (flex-direction) des items ou même leurs ordres d’affichage dans le container (order), nous avons là un modèle de mise en page bien plus flexible qu’un modèle classique de block en float, ou même un modèle avec des éléments inline.

Des pages avec des agencements complexes peuvent ainsi être mis en place plus simplement et avec un code plus propre, étant donné que, et cela est une petite révolution, l’ordre d’affichage des éléments est indépendant de leur ordre dans le code source.

Nous avons donc là un outil, à travers ce nouveau module CSS, qui devrait nous éviter d’en arriver là :

Compatibilité du CSS Flexbox

Bonne nouvelle, mis à part si vous développez un site et que IE 11 ou inférieur est une des plateformes cibles (ce qui est déjà une mauvaise nouvelle en soi…), le layout flexbox est plutôt bien reconnu sur la plupart des navigateurs, comme vous pouvez le voir ici http://caniuse.com/#search=flex, ou ci-dessous :

Les bases

Voici un schéma, et surtout une l’explication, qui nous permet de comprendre un peu mieux les bases du fonctionnement qu’offrent les Flexbox, et de ces possibilités.

Flex container :
L’élément parent dans lequel chaque élément flex sera contenu. Un conteneur flex est défini lorsque la propriété display possède la valeur flex ou inline-flex.

Flex item :
Chaque enfant d’un Flex container est un Flex item. Il n’a besoin d’aucune propriété CSS particulière, mais certaine vont nous permettre de contrôler plus précisément son comportement.

Main Axis et Cross Axis :
Chaque Flexbox suit deux axes ; L’axe principal (main axis) sur lequel les Flex items se suivent, et l’axe secondaire (cross axis), perpendiculaire à l’axe principal.

• La propriété flex-direction établit l’axe principal.
• La propriété justify-content définit comment les Flex items sont positionnés le long de l’axe principal sur la ligne courante.
• La propriété align-items définit comment les Flex items sont positionnés le long de l’axe secondaire sur la ligne courante.
• La propriété align-self définit comment un seul Flex item est aligné sur l’axe secondaire et surcharge le comportement par défaut définit par align-items.

Sources: https://developer.mozilla.org

Principale propriété et leurs utilités

Pour le Flex Contain

• Display : [flex | inline-flex] – Permet de définir un élément parent comme étant une Flexbox
• Flex-direction : [row | row-reverse | column | column-reverse] – Permet de définir le sens de lecture des items. En ligne (horizontalement), en ligne inversé, en colonne (verticalement) ou en colonne inversé.
• Flex-wrapp : [nowrap | wrap | wrap-reverse] – Permet de définir si les items doivent tous tenir sur une ligne (nowrap) ou peuvent être répartis sur plusieurs lignes. Dans ce cas, les items seront équitablement répartis entre les lignes.
• Justify-content : [flex-start | flex-end | center | space-between | space-around] – Permet de définir comment seront alignés les items.

Pour les Flex items

• order : <integer> – Permet de définir l’ordre d’affichage de l’item
• flex-grow : <number> – Permet de définir si l’item peut augmenter sa largeur, et de quel facteur il le fait.
• flex-shrink : <number> – Permet de définir si l’item peut réduire sa largeur.
• flex-basis : <length> | auto – Permet de définir une taille par défaut pour les items

La combo : Flexbox et Media-query

Le fonctionnement des flexboxs est en soi une très bonne amélioration du CSS et permet aux intégrateurs de résoudre facilement et simplement certaines problématiques courantes. Mais là où le modèle de mise en page devient très intéressant, et résout encore plus de problématiques, c’est qu’il est possible de le coupler avec les médias-queries.

En effet, il est maintenant très facile, en changeant la propriété order par exemple, de faire passer un élément avant un autre sans se soucier du flow normal du code HTML. On peut également facilement jouer sur l’alignement des éléments entre eux, ou modifier la proportion que peut prendre un élément au sein de son conteneur, à l’aide de la propriété flex-grow.

Les problématiques de différenciation de présentation dans l’ordre des blocs et des éléments, entre les versions mobiles, desktop et tablette ne semblent plus être un problème et sont surtout bien moins compliqués à gérer grâce au modèle Flexbox.