Editions ENI Livres | Vidéos | e-Formations
La mise en page Flexbox
Les objectifs
Le module CSS Flexible Box Layout Module Level 1 est en Candidate Recommendation au 19 novembre 2018 : http://www.w3.org/TR/css-flexbox-1/
C’est un module qui va vous permettre de "révolutionner" vos mises en page simples et complexes, qui va vous permettre de ne plus utiliser toute une série de "bidouilles" pour concevoir des mises en page web.
Sachez dès maintenant que la mise en page Flexbox ne travaille plus du tout avec les notions de table, de float, de clear ou de position. La mise en page Flexbox travaille dans le "contexte Flexbox".
Le Flexible Box Layout Module, ou Flexbox en plus court, ou modèle de boîte flexible en français, va vous permettre, entres autres :
-
de gérer des alignements des boîtes,
-
de centrer horizontalement et verticalement les boîtes,
-
d’avoir des mises en page fluides,
-
des hauteurs de boîte similaires,
-
des fonds colorés uniformes,
-
de concevoir des mises en page responsive.
En ce qui concerne l’implémentation de Flexbox, elle est tout simplement excellente. Voici le tableau de compatibilité de Can I use :
Les propriétés pour le conteneur Flexbox
1. Le conteneur
La mise en page Flexbox est contenue dans un conteneur qui possède l’affichage Flexbox. C’est lui qui va donner le "contexte Flexbox". Pour appliquer ce contexte Flexbox, nous allons utiliser la "très classique" propriété display sur n’importe quel élément HTML :
-
display: flex pour avoir un affichage en block, ou
-
display: inline-flex pour avoir un affichage inline-block.
Tous les éléments enfants du conteneur Flexbox, les items Flexbox, seront dans le contexte Flexbox, "positionnés" comme nous le voulons.
Voici un premier exemple simple, avec un conteneur en affichage display: flex contenant quatre enfants positionnés, par défaut, horizontalement.
Le code HTML/CSS :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma mise en page</title>
<meta charset="UTF-8" />
<style>
#conteneur {
display: flex;
}
p.bloc {
background-color: #eee;
border: solid 1px #000;
margin-right: 10px;
}
</style>
</head>
<body>
<div id="conteneur">
<p class="bloc">Truc</p>
<p class="bloc">Machin</p>
<p class="bloc">Bidule</p>
<p class="bloc">Chose</p>
</div>
</body>
</html> Voici l’affichage obtenu :
Vous voyez que les blocs sont les uns à côté des autres, nativement avec le contexte Flexbox.
2. La direction de l’affichage
La propriété flex-direction permet de définir la "direction" de l’affichage des éléments enfants du conteneur Flexbox : horizontale ou verticale. Cela définit l’axe principal du conteneur Flexbox. La direction de l’axe secondaire...
Les propriétés pour les items Flexbox
1. L’ordre d’affichage
La propriété order permet de déterminer l’ordre d’affichage des items, indépendamment de leur déclaration dans le code HTML.
Les valeurs de cette propriété sont des nombres entiers. Plus la valeur est petite (nous pouvons mettre des valeurs négatives), plus l’item Flexbox s’affiche en premier dans la liste des items. La valeur par défaut est 0. Si aucune valeur n’est indiquée, c’est l’ordre de déclaration des items dans le code HTML qui prévaut.
Voici un exemple où seuls deux items utilisent la propriété order.
Le code HTML/CSS :
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Ma mise en page</title>
<meta charset="UTF-8" />
<style>
#conteneur {
display: flex;
}
p.bloc {
background-color: #eee;
border: solid 1px #000;
margin-right: 10px;
}
.truc {
order: 2;
}
.chose {
order: -1;
}
</style>
</head>
<body>
<div id="conteneur">
<p class="bloc truc">Truc</p>
<p class="bloc">Machin</p>
<p class="bloc">Bidule</p>
<p class="bloc chose">Chose</p>
</div>
</body>
</html> L’affichage obtenu :
-
Le bloc Chose s’affiche en premier : order: -1. C’est la valeur la plus faible, il s’affiche donc en premier.
-
Le bloc Machin s’affiche en deuxième. Il n’y a pas de propriété order de définie, la valeur par défaut...
Réalisation d’une mise en page Flexbox
1. Les objectifs
Nous allons réaliser une mise en page Flexbox, qui sera responsive. Voici la maquette de cette mise en page :
-
un en-tête contiendra le nom et le slogan du site,
-
une barre de navigation affichera des liens internes au site,
-
deux sidebar seront placées à gauche et à droite du contenu,
-
le contenu principal sera affiché au centre et pourra contenir des articles par exemple.
Voici la structure des boîtes composant cette mise en page :
-
Toute la mise en page sera placée dans une boîte <div id="conteneur">.
-
L’en-tête sera inséré dans un élément <header> qui contiendra un élément <h1> pour le nom du site et un élément <h2> pour le slogan.
-
La barre de navigation utilisera un élément <nav>. Chaque lien <a> sera placé dans un élément <p>.
-
La partie centrale est placée dans un élément <main>. Cette partie centrale contiendra à gauche et à droite une sidebar (<aside id="gauche"> et <aside id="droite">). Le contenu rédactionnel sera placé dans un élément <section> et chaque article sera placé dans un élément <article>.
-
Le pied de page sera inséré dans un élément <footer>.
2. Le conteneur principal
Toute la mise en page est incluse dans une boîte <div id="conteneur">.
Pour la mise en page, une seule règle CSS est déclarée :
#conteneur {
margin: 0 auto;
max-width: 980px;
} La boîte a une taille maximale de 980 pixels et est centrée dans la fenêtre du navigateur.
3. L’en-tête
L’en-tête est placé dans un élément <header>. Il contient un élément <h1> pour le nom du site et un élément <h2> pour le slogan.
Le code HTML :
<header>
<h1>Mon site web</h1>
<h2>Vivamus sagittis lacus vel augue laoreet</h2>
</header> Pour la mise en forme CSS, l’en-tête est déclaré comme un conteneur...
Réalisation d’une mise en page Flexbox responsive
1. Les objectifs
Actuellement, tout site web se doit d’être responsive et à nouveau, la mise en page Flexbox nous propose des facilités d’organisation et d’affichage.
À partir de l’exemple précédent, voyons quels sont nos objectifs pour une mise en page responsive.
-
Nous souhaitons avoir une règle @media pour une largeur maximale de 640 pixels.
-
Dans la barre de navigation, les liens <a> inclus dans les éléments <p> doivent pouvoir aller à la ligne si besoin est.
-
Pour la partie principale, nous souhaitons que les items Flexbox s’affichent les uns sous les autres.
-
Toujours, pour la partie principale, nous souhaitons que la sidebar de gauche s’affiche en premier, suivie par la sidebar de droite et ensuite la partie centrale avec ses trois articles.
-
Les liens dans chaque sidebar doivent s’afficher les uns à côté des autres.
-
Les titres et les liens des sidebars doivent être correctement alignés.
-
Les liens des sidebars doivent être séparés par un tiret.
2. La règle @media
Nous souhaitons une mise en page responsive pour les écrans de diffusion d’une largeur maximale de 640 pixels. Toutes les règles CSS suivantes seront placées dans cette règle @media.
@media (max-width: 640px) {
...