Un flux alternatif : les boîtes flexibles

Une proposition de boîtes flexibles : FLEX

Au delà des propriétés déjà vues, le W3C propose un module permettant de définir les positions, tailles et interactions des boites : flex.

Ce module permet de déclarer la dynamique, en une dimension, des enfants d'un conteneur déclaré flex :
  • forme d'affichage des éléments enfants (ligne ou colonne) avec flex-direction
  • ordre d'affichage des éléments enfants (normale ou inversée) avec flex-direction
  • la possibilité des éléments enfants à occuper plusieurs lignes ou une seule du conteneur avec flex-wrap
Par ailleurs, les éléments eux-mêmes sont flexibles :
  • la taille des éléments, dans l'axe principal, n'est indiqué que comme référence avec flex-basis,
  • cette taille peut ensuite être modifiée par pour s'étendre ou se contracter avec flex-grow et flex-shrink,
  • dans leur place dans le flux par order
    • .
Et le conteneur gère les alignement et espacements de ses enfants :
  • flex-direction, selon sa valeur (ligne ou colonne) définit l'axe principal (vertical en colonne) et l'axe secondaire (vertical en ligne).
  • le conteneur contrôle  :
    • par justify-content les espacement de ses enfants sur l'axe principal.
    • par align-items les alignements de ses enfants sur l'axe secondaire.

Un premier exemple

À l'aide des propriétés flex approchez-vous de ce résultat à l'aide de ce fichier.

Quelques consignes :
  • ne pas intégrer de marge !
  • jouer avec le débugger pour tester les propriétés proposées pour chaque propriétés,
  • travailler d'abord sur .conteneur, ensuite sur les fils,
  • ne pas se contenter des valeurs par défaut sur les propriétés flex, expliciter toutes les propriétés.

Une fois le résultat obtenu, regarder les effets de la propriété align-items, appliquée sur le conteneur principal.

Appliquez votre feuille de styles sur ce nouveau fichier :
  • jouer avec la propriété flex-wrap,
  • regarder les propriétés 'inverse' sur flex-direction, tout en variant flex-wrap,
  • conclure.

Un second exemple

Pour illustrer ces propriétés nous utiliserons ce fichier.
Pensez à dessiner votre arborescence et le rendu souhaité, comme toujours, bordurer et colorer les principaux éléments.

À l'aide des proprétés de flex construire la feuille permettant d'obtenir une version beaucoup plus jolie de cette maquette pour un écran normal et de celle-ci pour un écran plus petit.

Vous pouvez aussi vous appuyer sur ce tutoriel.

Flex et adaptatif

En reprenant le menu flottant, proposer cette fois une solution adaptative uniquement à base de flex.