Mise en page flexible

Licence professionnelle ATC Webmestre

Alexandre NiveauFabrice Maurel

Enseignement des technologies du Web

 

Mise en page flexible

Notes de cours

  • Mise en page flexible
    • Conteneur et items
    • Alignement dans les deux axes
    • Gestion du retour à la ligne
    • Taille des items
    • Ordre des items
    • Limites de flexbox

Travail personnel

Objectifs

Flexbox est extrêmement pratique, mais peut être un peu déroutant, surtout si les bases de CSS ne sont pas encore maîtrisées. Si vous avez du mal, ne perdez pas trop de temps avec ce TP et consolidez plutôt vos bases en finissant (ou en refaisant) des exercices des TP précédents.

Le premier exercice est un petit jeu. Le deuxième exercice se veut une application à une vraie mise en page, mais suffisamment guidé pour ne pas trop vous perdre. Le troisième est plus ouvert, et vise à montrer les avantages de flexbox pour le responsive.

Exercice 1 — Flexbox Froggy

Cet exercice est optionnel. Si vous avez l'impression qu'il vous embrouille plus qu'il ne vous aide, passez à la suite.

Essayer le petit jeu Flexbox Froggy, qui vise à découvrir ou mieux comprendre les propriétés de flexbox. C'est très clair, bien fait, et en français.

Bonne chance !

Exercice 2 — Application directe de flexbox

Une proposition de correction est disponible (lien vers le CSS commenté ; archive).

On va reproduire la page Helbak, déjà faite dans le TP de mise en page, mais cette fois en utilisant flexbox.

Exemple de page à réaliser

Récupérer cette archive, qui contient une page HTML (NB : le code est un peu différent de la dernière fois, pour que l'exercice soit aussi simple que possible), une feuille de style base.css qui règle tous les détails de présentation qui ne dépendent pas de flexbox (on peut voir le résultat ici), et une feuille de style flex.css vide, qui va servir à régler la mise en page.

Compléter cette feuille de style en utilisant flexbox pour que la page ressemble au modèle ci-dessus. Attention : vous n'avez le droit d'utiliser que les propriétés suivantes :

  • flex-flow (ou flex-direction et flex-wrap)
  • align-items, justify-content, align-content
  • flex
  • et bien sûr display:flex

mais vous ne devez utiliser aucune autre propriété (il n'y en a pas besoin).

Exercice 3 — Mise en page classique responsive, version flex

Une proposition de correction est disponible (lien vers le CSS commenté ; archive).

On reprend l'exercice de mise en page responsive, mais cette fois en utilisant flexbox.

Récupérer cette archive, qui contient une page HTML (dont le code est un peu différent de la dernière fois, en particulier le menu est maintenant à la fin), une feuille de style base.css qui règle certains détails de présentation (on peut voir le résultat ici), et une feuille de style flex.css vide, qui va servir à régler la mise en page.

En utilisant notamment flexbox, compléter cette feuille de style pour que la page respecte les contraintes suivantes. (NB : les propriétés de flexbox ne suffisent pas forcément pour toutes les questions. Réfléchissez et choisissez le meilleur outil pour chaque tâche.)

  1. Au-dessus de 60 rem de largeur, la page doit ressembler à l'image suivante. Le menu doit être à gauche et faire 12 rem de large, l'encadré d'information à droite 15 rem de large, et la colonne du milieu doit prendre toute la largeur restante (sans utiliser calc !). De plus, le pied de page doit être en bas de la page, même si le contenu est trop court (sans utiliser position:absolute !).
    Exemple de page à réaliser
  2. En-dessous de 60 rem de largeur, le menu doit être affiché horizontalement, juste sous la bannière.
  3. En-dessous de 50 rem de largeur, l'encadré passe sous la partie principale.
  4. En-dessous de 25 rem de largeur, le menu disparaît et devient une icône (on pourra prendre la lettre « M ») tout en haut à gauche de l'écran.