Mise en page

Podcast CSS – 009: Mise en page

Imaginez que vous travaillez en tant que développeur et qu’un collègue concepteur vous remet une conception pour un tout nouveau site Web. La conception comporte toutes sortes de mises en page et de compositions intéressantes : des mises en page bidimensionnelles qui tiennent compte de la largeur et de la hauteur de la fenêtre d'affichage, ainsi que des mises en page fluides et flexibles. Comment décider de la meilleure façon de les styliser avec CSS ?

Le CSS nous permet de résoudre les problèmes de mise en page de différentes manières, sur un axe horizontal, sur un axe vertical ou même sur les deux. Choisir la bonne méthode de mise en page pour un contexte peut s'avérer difficile. Souvent, vous aurez peut-être besoin de plusieurs méthodes de mise en page pour résoudre votre problème. Pour vous aider, dans les modules suivants, vous découvrirez les caractéristiques uniques de chaque mécanisme de mise en page CSS pour prendre des décisions éclairées.

Mise en page: bref historique

Aux débuts du Web, des conceptions plus complexes qu'un simple document étaient mises en page avec des éléments <table>. La séparation du code HTML des styles visuels a été facilitée lorsque le CSS a été largement adopté par les navigateurs à la fin des années 90. Grâce au CSS, les développeurs peuvent modifier complètement l'apparence d'un site Web sans jamais toucher au code HTML. Cette nouvelle fonctionnalité a inspiré des projets tels que The CSS Zen Garden, qui a été créé pour démontrer la puissance du CSS et encourager davantage de développeurs à l'apprendre.

Les CSS ont évolué au même rythme que nos besoins en matière de conception Web et de technologie de navigateur. Pour découvrir comment la mise en page CSS et notre approche en matière de mise en page ont évolué au fil du temps, consultez cet article de Rachel Andrew.

Mise en page: présent et futur

Le CSS moderne dispose d'outils de mise en page exceptionnellement puissants. Nous disposons de systèmes dédiés pour la mise en page. Nous allons voir dans les grandes lignes ce que nous avons à notre disposition, avant d'étudier plus en détail Flexbox et Grid dans les prochains modules.

Comprendre la propriété display

La propriété display a deux fonctions. La première chose qu'il fait consiste à déterminer si la zone à laquelle il est appliqué agit en tant que zone intégrée ou en tant que bloc.

.my-element {
  display: inline;
}

Les éléments intégrés se comportent comme les mots d'une phrase. Ils sont posés l'un à côté de l'autre, dans le sens de l'alignement. Les éléments tels que <span> et <strong>, qui sont généralement utilisés pour styliser des éléments de texte dans des éléments contenant tels qu'un <p> (paragraphe), sont intégrés par défaut. Elles conservent également les espaces blancs environnants.

Vous ne pouvez pas définir de largeur et de hauteur explicites pour les éléments intégrés. Les marges et marges intérieures au niveau du bloc sont ignorées par les éléments environnants.

.my-element {
    display: block;
}

Les éléments de bloc ne sont pas côte à côte. Il crée une nouvelle ligne pour lui-même. À moins qu'il ne soit modifié par un autre code CSS, un élément de bloc s'agrandit jusqu'à la dimension intégrée, et s'étend donc sur toute la largeur en mode d'écriture horizontal. La marge de tous les côtés d'un élément de bloc sera respectée.

.my-element {
    display: flex;
}

La propriété display détermine également le comportement des enfants d'un élément. Par exemple, si vous définissez la propriété display sur display: flex, la zone devient une zone au niveau du bloc et convertit également ses enfants en éléments Flex. Cela permet d'activer les propriétés flexibles qui contrôlent l'alignement, l'ordre et le flux.

Flexbox et Grid

Il existe deux mécanismes de mise en page principaux qui créent des règles de mise en page pour plusieurs éléments : flexbox et grid. Elles partagent des similitudes, mais sont conçues pour résoudre différents problèmes de mise en page.

Flexbox

.my-element {
    display: flex;
}

Flexbox est un mécanisme de mise en page conçu pour les mises en page unidimensionnelles. Mise en page sur un seul axe, horizontalement ou verticalement. Par défaut, Flexbox alignera les éléments enfants de l'élément les uns à côté des autres, dans le sens de l'alignement, et les étirera dans la direction du bloc. Ils auront ainsi tous la même hauteur.

Les éléments restent sur le même axe et ne s'encapsulent pas lorsqu'ils manquent d'espace. Au lieu de cela, ils vont essayer de s’écraser sur la même ligne. Ce comportement peut être modifié à l'aide des propriétés align-items, justify-content et flex-wrap.

Flexbox convertit également les éléments enfants en éléments Flex, ce qui signifie que vous pouvez écrire des règles sur leur comportement à l'intérieur d'un conteneur flexible. Vous pouvez modifier l'alignement, l'ordre et la justification d'un élément spécifique. Vous pouvez également modifier la façon dont il se réduit ou s'agrandit à l'aide de la propriété flex.

.my-element div {
    flex: 1 0 auto;
}

La propriété flex est un raccourci pour flex-grow, flex-shrink et flex-basis. Vous pouvez développer l'exemple ci-dessus comme ceci:

.my-element div {
 flex-grow: 1;
 flex-shrink: 0;
 flex-basis: auto;
}

Les développeurs fournissent ces règles de bas niveau pour indiquer au navigateur comment la mise en page doit se comporter lorsqu'elle est interrogée en fonction des dimensions du contenu et de la fenêtre d'affichage. Cela en fait un mécanisme très utile pour la conception de sites Web réactifs.

Grille

.my-element {
    display: grid;
}

La grille est semblable à flexbox à bien des égards, mais elle est conçue pour contrôler les mises en page multi-axes plutôt que les mises en page à un seul axe (espace vertical ou horizontal).

La grille vous permet d'écrire des règles de mise en page sur un élément doté de display: grid et introduit de nouvelles primitives de style de mise en page, telles que les fonctions repeat() et minmax(). Une unité de grille utile est l'unité fr, qui correspond à une fraction de l'espace restant. Vous pouvez créer des grilles traditionnelles à 12 colonnes, avec un écart entre chaque élément, avec 3 propriétés CSS:

.my-element {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

L'exemple ci-dessus présente une mise en page à un seul axe. Alors que Flexbox traite principalement les éléments comme un groupe, la grille vous permet de contrôler précisément leur emplacement en deux dimensions. Nous pourrions définir que le premier élément de cette grille occupe deux lignes et trois colonnes:

.my-element :first-child {
  grid-row: 1/3;
  grid-column: 1/4;
}

Les propriétés grid-row et grid-column indiquent au premier élément de la grille de s'étendre au début de la quatrième colonne, à partir de la première colonne, puis de s'étendre à la troisième ligne à partir de la première ligne.

Mise en page du flux

Si vous n'utilisez pas de grille ni de Flexbox, vos éléments s'affichent selon un flux normal. Il existe un certain nombre de méthodes de mise en page que vous pouvez utiliser pour ajuster le comportement et la position des éléments dans un flux normal.

Bloc intégré

Vous vous souvenez que les éléments environnants ne respectent pas la marge de bloc et la marge intérieure d'un élément intégré ? Avec inline-block, vous pouvez provoquer ce problème.

p span {
    display: inline-block;
}

L'utilisation de inline-block vous donne une zone qui présente certaines des caractéristiques d'un élément au niveau du bloc, mais qui s'affiche toujours conformément au texte.

p span {
    margin-top: 0.5rem;
}

Nombres décimaux

Si vous avez une image dans un paragraphe de texte, ne serait-il pas pratique que ce texte entoure cette image comme vous pourriez le voir dans un journal ? Vous pouvez le faire avec des flottants.

img {
    float: left;
    margin-right: 1em;
}

La propriété float indique à un élément de "flotter" dans la direction spécifiée. L'image de cet exemple est invitée à flotter vers la gauche, ce qui permet ensuite aux éléments frères de "s'encapsuler" autour. Vous pouvez demander à un élément de superposer left, right ou inherit.

Mise en page à plusieurs colonnes

Si vous avez une très longue liste d'éléments, comme une liste de tous les pays du monde, cela peut entraîner beaucoup de défilement et une perte de temps pour l'utilisateur. Cela peut également créer des espaces blancs superflus sur la page. Avec le CSS multicolonne, vous pouvez le diviser en plusieurs colonnes pour résoudre ces deux problèmes.

<h1>All countries</h1>
<ul class="countries">
  <li>Argentina</li>
  <li>Aland Islands</li>
  <li>Albania</li>
  <li>Algeria</li>
  <li>American Samoa</li>
  <li>Andorra</li>
  …
</ul>

.countries {
    column-count: 2;
    column-gap: 1em;
}

Cela divise automatiquement cette longue liste en deux colonnes et ajoute un écart entre les deux colonnes.

.countries {
    width: 100%;
    column-width: 260px;
    column-gap: 1em;
}

Au lieu de définir le nombre de colonnes dans lesquelles le contenu est divisé, vous pouvez également définir une largeur minimale souhaitée, à l'aide de column-width. Au fur et à mesure que l'espace disponible dans la fenêtre d'affichage augmente, davantage de colonnes sont automatiquement créées. De plus, à mesure que l'espace est réduit, le nombre de colonnes diminue. Ceci est très utile dans les contextes de conception de sites Web réactifs.

La

La dernière étape de cette présentation des mécanismes de mise en page concerne le positionnement. La propriété position modifie le comportement d'un élément dans le flux normal du document et sa relation avec les autres éléments. Les options disponibles sont relative, absolute, fixed et sticky. La valeur par défaut est static.

.my-element {
  position: relative;
  top: 10px;
}

Cet élément est déplacé de 10 px vers le bas en fonction de sa position actuelle dans le document, car il est positionné par rapport à lui-même. L'ajout de position: relative à un élément en fait également le bloc conteneur de tous les éléments enfants avec position: absolute. Cela signifie que son enfant sera désormais repositionné vers cet élément particulier, plutôt que vers le parent relatif le plus élevé, lorsqu'une position absolue lui est appliquée.

.my-element {
  position: relative;
  width: 100px;
  height: 100px;
}

.another-element {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
}

Lorsque vous définissez position sur absolute, l'élément sort du flux de document actuel. Cela implique deux choses:

1. Vous pouvez positionner cet élément où vous le souhaitez à l'aide de top, right, bottom et left dans son parent relatif le plus proche.
2. Tout le contenu entourant un élément absolu s'ajuste pour remplir l'espace restant laissé par cet élément.

Un élément dont la valeur position est définie sur fixed se comporte de la même manière que absolute, son parent étant l'élément <html> racine. Les éléments fixes restent ancrés en haut à gauche en fonction des valeurs top, right, bottom et left que vous définissez.

Vous pouvez obtenir les aspects ancrés et fixes de fixed et les aspects plus prévisibles qui respectent le flux de documents de relative en utilisant sticky. Avec cette valeur, lorsque la fenêtre d'affichage défile au-delà de l'élément, elle reste ancrée aux valeurs top, right, bottom et left que vous avez définies.

Conclusion

La mise en page CSS offre beaucoup de choix et de flexibilité. Pour aller plus loin dans la puissance des CSS Flexbox et Grid, passez aux modules suivants.

Testez vos connaissances

Tester vos connaissances en matière de mise en page