Un atout et une solution miraculeuse ?

De bonnes raisons de s'y mettre

Après "moult" hésitations, je me suis enfin dit qu'en tant qu'intégrateur web, je devrais m'intéresser davantage à l'utilisation des "Flexbox" pour des mises en page d'éléments nécessitant d'être un acrobate des CSS.

Le but de cet article n'est pas d'expliquer les flexbox, beaucoup de ressources (voir les liens proposés) très bien faites existent déjà, mais modestement se poser la question pourquoi cela peut-être un progrès.

Pourquoi je ne me suis pas décidé plus tôt ?

Les motifs sont assez simples, une forme de prudence vis à vis de "la nouveauté" où on nous disait clairement "allez-y mais il existe des contraintes", le fait aussi de sortir de sa zone de confort avec notre très chère propriété "float" et notre classe révolutionnaire ".clearfix" !

Quelles raisons m'ont poussé à m'y intéresser ?

Du temps s'est écoulé depuis et en me documentant à nouveau, un certain nombre d'arguments m'ont invité à ne plus être "has been" mais surtout et plus sérieusement à percevoir de réelles avancées, donc voici une liste de faits qui m'ont amené à me remettre en question :

- La compatibilité navigateur est correcte pour franchir le pas, en se basant sur can i use, avec en liens des ressources proposées pour gérer les bugs de prise en charge.

- On peut gérer correctement son implémentation en postprocessing avec autoprefixer en l'utilisant au sein d'une tâche Gulp (que j'apprécie) par exemple ou avec bien d'autres outils.

- Le centrage de contenu horizontal et vertical est désormais facilité, on oublie donc les tricks de notre kit de survie, comme les positions absolues, marges négatives, ou les comportements de tableau avec display: table / table-cell, ou bien d'autres techniques encore ...

- Le positionnement "inline" devient aussi plus naturel sans avoir les contraintes et dommages collatéraux d'utilisation du fameux "display: inline-block" pourtant bien pratique, avec une distribution, un espacement, un dimensionnement des blocs plus aisés.

- L'ordre des blocs (items) peut être modifié de manière très souple, ce qui simplifie grandement le templating par rapport à un "device" particulier.

- Les systèmes de grid en vogue suivent le mouvement, je pense notamment à Foundation 6 qui confirme son utilisation, un Bootstrap 4 qui va en proposer l'utilisation, d'autres s'y sont mis, il y a un certain temps déjà, comme Knacss ou Gridlex.

Le principe de flexbox ne permet cependant que le positionnement d'items dans une dimension unique, alors que la spécification en "grid layout" très prometteuse permettra, une fois qu'elle sera bien prise en charge, de faire un positionnement en deux dimensions.

Plusieurs voyants sont véritablement au vert pour nous inciter à aller de l'avant et considérer flexbox comme un "atout" à la réalisation de certaines pirouettes particulières, donc si la vie de l'intégrateur web peut être plus agréable, profitons-en ...

Voici quelques liens sur le sujet proposés par Alsacréations :

• W3C : Spécification flexbox module
• Jack in the flexbox : une galerie de démonstrations dédiée à flexbox
• Solved by flexbox : des problèmes CSS classiques réglés grâce à flexbox
• Flexyboxes : un bac à sable pour tester flexbox
• Flexbox Adventures : un article anglais très détaillé sur les subtilités de flexbox
• Flexbugs : les bugs connus de flexbox et comment les contourner

Et aussi :

• Flexbox Playground - Tester en live flexbox
• A Complete Guide to Flexbox (CSS Tricks) - Tour d'horizon sur flexbox
• Flexbox Froggy - Un jeu pour apprendre flexbox
• Flexibility - Un polyfill pour flexbox

Cet article Peut-on passer sereinement à l’usage des flexbox ? est apparu en premier sur DOTPROGS.