Quand on pense aux mises en page, on pense souvent aux conceptions au niveau de la page. Toutefois, les composants plus petits de la page peuvent avoir leurs propres mises en page autonomes.
Idéalement, ces mises en page au niveau du composant s'ajusteront automatiquement, quelle que soit leur position sur la page. Dans certains cas, vous ne savez pas si un composant sera placé dans la colonne de contenu principal, dans la barre latérale ou dans les deux. Si vous ne savez pas avec certitude où un composant va se retrouver, vous devez vous assurer qu'il peut s'adapter à son conteneur.
GRid
La grille CSS n'est pas réservée aux mises en page au niveau de la page. Il fonctionne également bien pour les composants qui y sont intégrés.
Dans cet exemple, les pseudo-éléments ::before
et ::after
créent des lignes décoratives de chaque côté d'un titre. Le titre lui-même est un conteneur de grille. Les éléments individuels sont disposés de manière à ce que les lignes remplissent toujours l'espace disponible.
h1 {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1em;
}
h1::before,
h1::after {
content: "";
border-top: 0.1em double black;
align-self: center;
}
![Outils pour les développeurs dans Firefox affichant une superposition de grille.](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-firefox-41cc2b52eb644.png?authuser=5&hl=fr)
![Outils pour les développeurs dans Chrome affichant une grille en superposition.](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-chrome-s-295e54e7843c5.png?authuser=5&hl=fr)
Découvrez comment inspecter la mise en page sous forme de grille dans les outils pour les développeurs Chrome.
Flexbox
Comme son nom l'indique, vous pouvez utiliser flexbox pour rendre vos composants flexibles. Vous pouvez déclarer les éléments de votre composant qui doivent avoir une taille minimale ou maximale et laisser les autres éléments s'adapter en conséquence.
Dans cet exemple, l'image occupe un quart de l'espace disponible et le texte occupe les trois autres quarts. Mais elle ne dépasse jamais 200 pixels.
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
max-inline-size: 200px;
}
.media-content {
flex: 3;
}
![Outils pour les développeurs dans Firefox affichant une superposition Flexbox](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-firefox-4f0d749fd4328.png?authuser=5&hl=fr)
![Outils pour les développeurs dans Chrome avec une superposition Flexbox](https://web.developers.google.cn/static/learn/design/micro-layouts/image/developer-tools-chrome-s-49b481f837205.png?authuser=5&hl=fr)
Découvrez comment inspecter les mises en page Flexbox dans les outils pour les développeurs Chrome.
Requêtes de conteneur
Flexbox vous permet de concevoir à partir du contenu. Vous pouvez spécifier les paramètres de vos éléments (leur largeur et leur largeur) et laisser le navigateur déterminer l'implémentation finale.
Toutefois, le composant lui-même n'a pas connaissance de son contexte. Il ne sait pas s’il est utilisé dans le contenu principal ou dans une barre latérale. Cela peut rendre les mises en page des composants plus délicates que les mises en page. Pour pouvoir appliquer des styles pertinents d'un point de vue contextuel, vos composants doivent en savoir plus sur la taille de la fenêtre d'affichage dans laquelle ils se trouvent.
Avec les mises en page, vous connaissez la largeur du conteneur, car celui-ci est la fenêtre d'affichage du navigateur. Les requêtes média indiquent les dimensions du conteneur au niveau de la page.
Pour générer des rapports sur les dimensions d'un conteneur, utilisez des requêtes de conteneur.
Pour commencer, définissez les éléments qui servent de conteneurs.
main,
aside {
container-type: inline-size;
}
Cela signifie que vous souhaitez interroger la dimension intégrée. Pour les documents en anglais, il s'agit de l'axe horizontal. Vous allez changer les styles en fonction de la largeur du conteneur.
Si un composant se trouve dans l'un de ces conteneurs, vous pouvez appliquer des styles de la même manière que vous appliquez des requêtes média.
.media-illustration {
max-width: 200px;
margin: auto;
}
@container (min-width: 25em) {
.media {
display: flex;
align-items: center;
gap: 1em;
}
.media-illustration {
flex: 1;
}
.media-content {
flex: 3;
}
}
Si un objet multimédia se trouve dans un conteneur dont la largeur est inférieure à 25em
, les styles Flexbox ne sont pas appliqués. L'image et le texte apparaissent dans l'ordre vertical.
Toutefois, si l'élément conteneur est plus large que 25em
, l'image et le texte s'affichent côte à côte.
Avec les requêtes de conteneur, vous pouvez appliquer un style aux composants indépendamment. Vous pouvez écrire des règles en fonction de la largeur de l'élément conteneur. La largeur de la fenêtre d'affichage n'a plus d'importance.
Combiner des requêtes
Vous pouvez utiliser des requêtes média pour la mise en page et des requêtes de conteneur pour les composants de la page.
Ici, la structure globale de la page comporte un élément main
et un élément aside
.
Ils contiennent des objets multimédias.
<body>
<main>
<div class="media">…</div>
<div class="media">…</div>
</main>
<aside>
<div class="media">…</div>
</aside>
</body>
Une requête média applique une mise en page sous forme de grille aux éléments main
et aside
lorsque la fenêtre d'affichage est plus large que 45em
.
@media (min-width: 45em) {
body {
display: grid;
grid-template-columns: 3fr 1fr;
}
}
La règle de requête du conteneur pour les objets multimédias reste la même : n'appliquez une mise en page flexible horizontale que si l'élément parent est plus large que 25em
.
Les requêtes de conteneur changent la donne pour les micromises en page. Vos composants peuvent être autonomes, indépendants de la fenêtre d'affichage du navigateur.
Testez vos connaissances
Testez vos connaissances sur les micro-mises en page.
La grille et le Flexbox sont tous deux utiles pour les micro-mises en page.
Précédemment, vous avez découvert les mises en page de macros au niveau de la page. Vous connaissez maintenant les micro-mises en page au niveau des composants.
Vous allez maintenant approfondir les éléments de base de votre contenu et apprendre à rendre vos images responsives. Tout d'abord, vous allez découvrir la typographie responsive.