flexbox.jpg

la puissance des flexboxes

Les flexboxes c'est quoi? On ne parle pas de flexion en gymnastique ou d'acronyme français dont on ignore le sens mais bien de développement web et plus particulièrement de CSS3. Les flexboxes sont enfin compatibles avec les navigateurs récents et permettent de simplifier la gestion et le développement des sites web. Le but est de simplifier la création de la structure HTML, il est vrai que cette description est un peu réductrice.

En effet, ce système peut s'étendre à toutes les parties du sites et grandement faciliter la modularité et la flexibilité de ce dernier en rendant toute ou partie des éléments directement "pilotables" depuis leur parent. En gros, c'est le parent qui va diriger les enfants. Bon heureusement ce n'est pas une monarchie, certes les parents donnent les directives mais les enfants peuvent très bien décider de sortir du lot et d'adopter un autre comportement. Pour résumé, le comportement général est défini par le parent mais chaque enfant peut être stylisé indépendamment au besoin.

Les flexboxes permettent de gérer le comportement des enfants lors du redimensionnement du parent, l'alignement vertical et horizontal au sein de ce dernier (ligne ou colonne). De plus, ils permettent également de définir l'ordre d'affichage ainsi que le sens vertical (en colonne) et horizontal (en ligne). Oui, il est même possible d'inverser tout le contenu avec une seule propriété. Imaginez faire cela sans les flexboxes et uniquement pour les mobiles... Bonne chance.

Chez NEUE, nous sommes convaincus par la puissance des flexboxes, d'ailleurs, nous les avons implémentés sur nos derniers sites. Ils ont révolutionnés notre manière de développer et font désormais parties de nos outils.

Voici un excellent article (en anglais) si vous souhaitez plus d'information et des exemples concrets

https://css-tricks.com/snippets/css/a-guide-to-flexbox/


ainsi qu'un petit jeu très instructif

http://flexboxfroggy.com/