Un petit article, pour ceux qui tardent à se mettre à Flexbox (Flexible Box) en production, et si il fallait commencer par un argument massif pour convaincre les retardataires, il suffit de regarder du côté de Bootstrap 4 qui embarque désormais cette spécification au sein de son framework. Même si on aime pas changer ses habitudes, c’est un petit effort pour bien des avantages, notamment, la prédictibilité de la mise en page face aux différents écrans, on est plus à la merci d’un float mal luné ou tout autre positionnement récalcitrant. Dans de nombreux cas, le modèle Flexbox offre une amélioration du modèle de boîte. Fini les problèmes de fusion de marge et les éléments auxquels il faut apporter le contexte BFC (Block formatting Context) pour gérer les flottants à qui on en demandait beaucoup face à se contexte des mobiles pour lesquelles ils n’avaient pas été pensé.

Alors même si Flexbox ne répond pas à toutes les sollicitations, il faudra voir du côté de Grid layout pour satisfaire à un layout vraiment adapté aux mobiles et à ses contingences, les designers trouveront néanmoins le modèle de flexbox plus simple à utiliser. Les éléments enfants appelés flex-item peuvent être placés dans n’importe quelle direction et occuperont la place disponible pour s’adapter à la nouvelle mise en page.

La particularité de se positionnement est que l’élément parent donne le ton, alors qu’avec les flottants on était habitué à agir à leur niveau, ici les enfants sont soumis aux dictate de leur ainés. Les enfants se verront ainsi affectés un positionnement identiques a leur frères : soit horizontalement soit verticalement tout en prenant le maximum de place afin de couvrir l’espace libre. Et c’est ici la limité de Flexbox,je pense car il convient de réfléchir lors de l’intégration HTML au fait que les blocs enfants fonctionneront tous à l’avenant dans un mode grille.

En revanche pour ceux qui ont du gérer des projets avec des pages rechargées en Ajax, cela peut devenir une véritable gageure de positionner de nouveaux éléments qui arrivent inopinément dans le DOM et qu’il faut pouvoir aligner et inviter à prendre leur place dans le flux HTML. C’est ici que Flexbox est la martingale qui va vous sauver le vie, en effet un élément venant s’intercaler entre deux blocs déjà positionner, verront ceux-ci naturellement faire un place au nouvel arrivant tout en se réorganisant dans la page, et ceci avec un code in fine plus simple. Un autre atout de Flexbox et de permettre de changer l’ordre d’affichage des éléments par rapport à leur ordre dans le code source.
Le cas typique c’est la possible réorganisation des éléments en mode mobile pour mettre en exergue un élément qui nous semblera essentiel sur mobile.

Une fois que l’on est convaincu des bienfaits d’une telle technique, encore faut-il pouvoir la mettre en place, un peu de travail sera nécessaire pour comprendre les subtilités d’un spécification exigeante et puissante. Même si les éléments qui recoivent la propriété : display:flex dont hérite les enfants qui peuvent à leur tour s’en prévaloir, ceux-ci ont tout de même leur mot à dire sur la façon dont il vont se comporter face à un alignement selon l’axe X ou Y. Pour ce faire, on agira sur la propriété Flex des flex-item et ses trois valeurs fonctionnant de manière concomittentes pour manoeuvrer au mieux nos éléments : Flex-grow, Flex-shrink et flex-basis. Ces valeurs sont assez délicates à comprendre et leurs fonctionnements relèvent de calculs assez complexes donc inutile de vouloir chercher trop loin les logiques qui permette de mesurer leurs valeurs respectives.

Flexbox a quelques bottes secrètes assez appréciables notamment le fait de pouvoir centrer verticalement les éléments dans leur parent, chose toujours complexe jusqu’a présent.
Autre trouvaille la propriété margin prend un nouveau sens avec Flexbox en poussant les éléments enfants dans n’importe quel sens, par exemple : margin-left:auto, poussera l’élément vers la droite, un peu a l’instar d’un float:right.

La prise en main de Flexbox passera par un peu d’entraînement pour comprendre toutes les règles de ce nouveau jeu, mais les ressources ne manquent par sur le web.
En premier lieu, un livre référence : CSS3 Flexbox de Raphaël Goetter

Quelques liens :
codepen.io
css-tricks.com
medium.freecodecamp.org
tutorialzine.com