Les bases
Mise en pratique
Approfondir
TP Responsive
TP Avancé
TP Restaurant : L'en-têteRéservé aux membres premiums
42 min
TP Restaurant : Bloc présentationRéservé aux membres premiums
38 min
TP Restaurant : MenuRéservé aux membres premiums
40 min
TP Restaurant : RéservationRéservé aux membres premiums
32 min
TP Restaurant : Recettes & planRéservé aux membres premiums
37 min
TP Restaurant : FooterRéservé aux membres premiums
17 min
TP Restaurant : Page recetteRéservé aux membres premiums
42 min
Aller plus loin

Flexbox est un nouveau mode de mise en page (display) qui permet de disposer les éléments de manière plus flexible et de gérer de manière prévisible leur alignement quelque soit la taille de l'écran. Ce nouveau mode de disposition vient se positionner comme une amélioration du modèle block reposant sur les floats.

Liens utiles

Fonctionnement de base

Pour utiliser les flexbox il suffit de mettre un display:flex sur l'élément englobant plusieurs enfants. Les enfants directs se placeront alors les uns à côté des autres en essayant d'occuper tout l'espace disponible. Il est ensuite possible de piloter le comportement des enfants gràce à des propriétés comme flex-direction, flex-wrap, justify-content, etc...

Pour l'ensemble des propriétés disponibles je vous renvois vers cette page css-tricks.com qui résume très bien ces propriétés et leur effet sur les éléments en flex.

Compatibilité

Les flexbox sont supportées par tous les navigateur modernes sauf Internet Explorer (on commence à avoir l'habitude...)

  • IE11 supporte assez bien les flexbox mais possède quelques bugs dans certains cas (cf caniuse.com)