Mise en page

Podcast CSS – 009: Mise en page

Imaginez que vous travaillez en tant que développeur, et un collègue concepteur vous remet une conception pour un tout nouveau site web. La conception présente 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 les mises en page qui doivent être fluides et flexibles. Comment déterminer la meilleure façon d'appliquer un style à ces éléments avec CSS ?

Le CSS offre plusieurs façons de résoudre les problèmes de mise en page, sur un axe horizontal, un axe vertical ou même les deux. Choisir la bonne méthode de mise en page pour un contexte peut être difficile, et 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 éclairer ces décisions.

Mise en page: bref historique

Aux débuts du Web, des conceptions plus complexes qu'un simple document ont été disposées 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 ont pu modifier complètement l'apparence d'un site Web sans avoir à toucher au code HTML. Cette nouvelle fonctionnalité a inspiré des projets tels que The CSS Zen Garden, qui a été conçu pour démontrer la puissance du CSS et encourager davantage de développeurs à l'apprendre.

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

Mise en page: le présent et le futur

Le CSS moderne offre des outils de mise en page incroyablement puissants. Nous avons des systèmes dédiés pour la mise en page et nous allons voir de haut niveau ce que nous avons à notre disposition, avant d'aborder plus en détail Flexbox et Grid dans les prochains modules.

Comprendre la propriété display

La propriété display a deux fonctions. Il détermine tout d'abord si la case à laquelle il est appliqué agit comme une ligne intégrée ou un bloc.

.my-element {
  display: inline;
}

Les éléments intégrés se comportent comme des mots dans une phrase. Ils sont alignés l'un à côté de l'autre. Des é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 des éléments tels qu'une <p> (paragraphe), sont intégrés par défaut. Elles préservent également les espaces blancs environnants.

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

.my-element {
    display: block;
}

Les éléments de bloc ne sont pas placés les uns à côté des autres. Il crée une nouvelle ligne. Sauf modification par un autre code CSS, un élément de bloc s'agrandit jusqu'à la dimension intégrée, s'étendant donc sur toute la largeur en mode d'écriture horizontale. Les marges de part et d'autre d'un élément de bloc sont respectées.

.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 boîte 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 grille

Deux principaux mécanismes de mise en page permettent de créer des règles de mise en page pour plusieurs éléments : le flexbox et la grid. Ils partagent des similitudes, mais sont conçus 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 pour les mises en page à une dimension. Mise en page sur un seul axe, horizontalement ou verticalement. Par défaut, Flexbox aligne les enfants de l'élément les uns à côté des autres, dans le sens de l'alignement, et les étirez dans le sens du bloc, afin qu'ils soient tous à la même hauteur.

Les éléments restent sur le même axe et ne sont pas encapsulés lorsqu'ils manquent d'espace. Au lieu de cela, ils essaient de s'écraser sur la même ligne les uns que les autres. Vous pouvez modifier ce comportement à 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 dans un conteneur flexible. Vous pouvez modifier l'alignement, l'ordre et la justification d'un élément individuel. Vous pouvez également modifier la façon dont il rétrécit ou croît à 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 le comportement de la mise en page. lorsque les dimensions du contenu et de la fenêtre d'affichage le posent. 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 similaire à bien des égards au flexbox, mais il est conçu pour contrôler les mises en page multi-axes au lieu des 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 comportant display: grid, et introduit quelques nouvelles primitives pour le style de mise en page, telles que les fonctions repeat() et minmax(). Une unité de grille utile est l'unité fr (une fraction de l'espace restant). Vous pouvez créer des grilles traditionnelles à 12 colonnes. avec un écart entre chaque article, avec trois propriétés CSS:

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

L'exemple ci-dessus montre une mise en page à un seul axe. où Flexbox traite principalement les éléments comme un groupe, vous permet de contrôler précisément leur emplacement dans 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 jusqu'au début de la quatrième colonne, de la première colonne, puis s'étendent jusqu'à la troisième ligne, à partir de la première ligne.

Disposition du flux

Si vous n'utilisez pas la grille ou le Flexbox, vos éléments s'affichent dans 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 le 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 cette situation.

p span {
    display: inline-block;
}

L'utilisation de inline-block vous donne une boîte qui possède certaines des caractéristiques d'un élément au niveau du bloc, tout en étant aligné avec le texte.

p span {
    margin-top: 0.5rem;
}

Nombres décimaux

Si vous avez une image qui apparaît dans un paragraphe, 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 floats.

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

La propriété float indique à un élément de "float" dans la direction indiquée. Dans cet exemple, l'image est censée flotter vers la gauche, ce qui permet aux éléments frères d'encapsuler autour. Vous pouvez demander à un élément de faire flotter left, right ou inherit.

Mise en page multicolonne

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éfilements et de temps perdu pour l'utilisateur. Elle peut également créer un espace blanc superflu sur la page. Avec CSS multicolonne, vous pouvez le diviser en plusieurs colonnes pour vous aider à 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 espace 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 la largeur minimale souhaitée à l'aide de column-width. Plus la fenêtre d'affichage dispose d'espace, d'autres colonnes seront automatiquement créées et plus l'espace sera réduit, de colonnes sera également réduit. Ceci est très utile dans les contextes de conception de sites Web réactifs.

La

Le dernier point de cette présentation des mécanismes de mise en page est le positionnement. La propriété position modifie le comportement d'un élément dans le flux normal du document. et comment elle se rapporte à d'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écalé 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. L'élément enfant sera donc repositionné au lieu du parent le plus élevé relatif, lorsqu'une position absolue est appliquée à ce parent.

.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, cela fait sortir l'élément du flux de documents actuel. Cela signifie deux choses:

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

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

Vous pouvez obtenir l'ensemble de données Correction d'aspects de fixed et des aspects plus prévisibles du flux de documents de relative à l'aide de sticky. Avec cette valeur, lorsque la fenêtre d'affichage dépasse l'élément, il reste ancré aux valeurs top, right, bottom et left que vous définissez.

Conclusion

La mise en page CSS offre un grand choix et une grande flexibilité. Pour approfondir vos connaissances sur les fonctionnalités CSS Flexbox et Grid, passez aux prochains modules.

Testez vos connaissances

Tester vos connaissances sur la mise en page