10 Layout CSS

Certains éléments HTML sont rendus d'une certaine manière par le navigateur sans CSS supplémentaire. C'est pourquoi il est si important d'utiliser les bons éléments HTML, parce qu'alors un certain style se chargera de lui-même.

Avec la propriété "display", vous pouvez contrôler différentes mises en page pour votre HTML.

# display: inline;

Chaque navigateur interprète la balise <span> avec display: inline; par défaut, sans que vous ayez à définir quoi que ce soit d'autre dans le CSS. Un élément HTML de style "display: inline" peut faire partie du body du texte et peut s'étendre sur plusieurs lignes. Les espaces avec "padding" ou "marge" (comme dans le modèle de la boîte) ne sont pas acceptés par "display: inline;`.

span {
border: 0.1rem solid tomato;
}

<p>
  Je suis un texte où <span>une petite partie est mise en évidence et le contenu peut dépasser plusieurs lignes.</span>.
</p>

Résultat

Je suis un texte dont une petite partie est mise en évidence et dont le contenu peut dépasser plusieurs lignes.

# display: block;

Les éléments avec "display: bloc;" prennent toute la largeur de leur parent. De multiples éléments de "bloc" apparaissent les uns sous les autres. La hauteur est définie par le contenu de cette boîte, à moins que ce comportement ne soit annulé par les règles CSS. Un élément "block" sans contenu (généralement du texte) n'a donc pas de hauteur.

Voici un exemple de la façon dont la mise en page change lorsque vous définissez "display: block" pour un élément "<span>".

    span {
      display:  block;
      border: 0.1rem solid tomato;
    }

    <p>
      Je suis un texte dont <span>une petite partie est affichée sous forme de bloc.</span> Le reste du texte n'est pas affecté.
    </p>

Résultat

Je suis un texte dont une petite partie est affichée sous forme de bloc. Le reste du texte n'est pas concerné par cette mesure.

# display: inline-block;

Le "inline" combine le comportement du "inline" et du "bloc". Contrairement à "en ligne", le "inline" peut également comprendre les propriétés de "rembourrage" et de "marge".

Les entrées individuelles d'une liste sont affichées par les navigateurs sous forme de "bloc" par défaut. Si vous ne voulez pas afficher ces entrées de liste l'une en dessous de l'autre, mais à côté de l'autre, alors le blocage en ligne est utile.

    <ul>
      <li>Beurre</li>
      <li>Tomates</li>
      <li>Salade</li>
      <li>Oursons en amande</li>
    </ul>

tester ce code

Tester avec "inline-block"

    li {
      display:  inline-block;
      border: 0.1rem solid tomato;
      padding: 0.5rem;
    }

# display: flex;

Display: flex" signifie Flexbox, qui fournit un moyen avancé de concevoir des mises en page modernes et réactives sans avoir à utiliser des propriétés comme "position", "float" ou "clear".

Quand Flexbox et quand Grid ?

Difference Flexbox to Grid](https://github.com/inetis-ch/viscom-cie1/raw/main/asset/img/grid-vs-flexbox.3e4cb859.png) source

Flexbox est plus adapté lorsque le contenu doit être présenté dans une seule dimension, c'est-à-dire sur une seule ligne ou colonne. La grille permet de présenter le contenu en deux dimensions - lignes et colonnes.

Utilisation de Flexbox

Pour utiliser les fonctionnalités de Flexbox, un conteneur Flexbox doit être défini. Il contient les éléments qui seront mis en place à l'aide de Flexbox.

<div class="flexbox-container">
  <div class="element-one">
    Premier article flexible
  </div>
  <div class="element-two">
    Deuxième point flex
  </div>
</div>

.flexbox-container {
  display:  flex;
  border: 1px solid royalblue;
}

.element-one,
.element-two {
  background-color: orange;
  padding: 0.5rem;
  margin: 0.5rem;
}

tester ce code

Sur le conteneur flex, les propriétés "align-items" et "justify-content" peuvent être utilisées pour modifier la position des éléments flex. L'élément d'alignement contrôle l'alignement sur l'axe Y, le contenu de la justification l'alignement sur l'axe X. Avec la "direction flexible", les axes X et Y peuvent être échangés. Par défaut, le navigateur affiche les éléments flex sur une seule ligne (row). Avec flex-direction: column; les Flex-Items peuvent être affichés les uns en dessous des autres. Avec les fonctions "Row-Reverse" et "Column-Reverse", les éléments flexibles peuvent également être inversés dans leur affichage.

.flexbox-container {
  display:  flex;
  border: 1px solid royalblue;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 20rem;
}

:hand: tester ce code

Jusqu'à présent, les éléments flexibles ne prennent que la taille que leur contenu spécifique. Si vous voulez manipuler ces tailles, alors les propriétés "flex-grow", "flex-shrink" et "flex-basis" entrent en jeu.

Les éléments Flex ont les propriétés suivantes par défaut dans le navigateur :

flex-grow: 0; (les articles ne grandissent pas plus que leur contenu).
flex-shrink: 1; (Les articles peuvent devenir plus petits, à condition que leur contenu le permette ou qu'ils puissent être emballés).
flex-basis: auto; (La taille de l'élément flex est définie par son contenu)
ordre: 0; (L'ordre correspond à celui du code HTML)

Exemple

Vous avez un conteneur flexbox avec deux articles flex à l'intérieur, qui veulent tous les deux prendre 1000 px chacun. Mais si vous n'avez pas 2000 px d'espace pour afficher les deux côte à côte, le "flex-grow" et le "flex-shrink" entrent en jeu.

Avec "flex-shrink" vous pouvez définir un facteur qui détermine combien l'élément flexible doit se rétracter par rapport au reste des éléments flexibles dans le conteneur s'il n'y a pas assez de place dans la rangée. Par défaut, comme décrit ci-dessus, tous les éléments flexibles ont un facteur de "1" et donc se réduisent de manière égale, à moins que l'un des éléments flexibles ait plus de contenu que l'autre. Ensuite, tout est basé sur le réglage par défaut de "flex-basis: auto". Dans cet exemple, cependant, tous les articles devraient avoir une "base flexible" de 1000px.

.element-one {
  flex-basis: 1000px;
  flex-shrink: 5; /* Doit rétrécir deux fois plus que les autres */
}
.element-two {
  flex-basis: 1000px;
  flex-grow: 1; /* Doit remplir l'espace disponible. La valeur par défaut est toujours 0, de sorte que l'élément ne serait pas plus large que son contenu. */
}

:hand: tester ce code

Avec la propriété flex-wrap: wrap; sur le conteneur flexbox, vous pouvez indiquer au navigateur d'envelopper des éléments flex entiers (et non leur contenu) sur une nouvelle ligne s'ils deviennent trop gros.

Flexbox est très complet et nécessite un peu de pratique. Il en résulte des mises en page flexibles qui fonctionnent sur une grande variété d'écrans. En annexe, vous trouverez des liens utiles qui vous faciliteront l'utilisation de Flexbox.

Autres Liens

Un guide complet sur Flexbox (css-tricks.com)
Apprendre Flexbox de manière ludique: Flexbox Froggy
Différence entre Flexbox et Grid (codepen.io)

# display: grid;

Flexbox convient pour les mises en page en une dimension, Grid pour les mises en page en deux dimensions, dans le cas où vous avez besoin de plus d'options de conception avec des lignes et des colonnes.

Le graphique ci-dessous explique les concepts de base des grilles CSS.

Concepts de la grille CSS](https://github.com/inetis-ch/viscom-cie1/raw/main/asset/img/cssGrid.a5e3f09f.png) source

Comme pour Flexbox, vous devez d'abord définir un conteneur de grille en définissant la disposition de votre grille.

.grid-container {
  display: grid;
  /*
    L'unité fr signifie "fraction".
    Si une zone est divisée en deux parties égales
    fractionnées, alors chaque fraction est large de 50 %. 

    Voici une présentation en deux colonnes 
    et deux lignes, où les colonnes 
    et les rangées occupent chacune 50 % de la hauteur/largeur de la 
    l'espace disponible.
  */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid royalblue;
}

Avec les propriétés "grille-colonne" et "grille-rangée", vous pouvez maintenant attribuer votre contenu à certaines "cellules de la grille". Cela fonctionne comme le jeu "Couler des bateaux", où vous communiquez les coordonnées sur l'axe X (grid-column) et l'axe Y (grid-row).

.main {
  grid-column: 2; /* 2ème colonne */
  grid-row: 2; /* 2ème rangée */
}

.header {
  grid-column: 2; /* 2ème colonne */
  grid-row: 1; /* 1ère rangée */
}

.sidebar {
  grid-column: 1; /* 1ère colonne */
  grid-row: 1; /* 1ère rangée */
}

<div class="grid-container">
  <div class="sidebar">sidebar</div>
  <div class="header">header</div>
  <div class="main">Main</div>
</div>

tester ce code

Vous pouvez utiliser les propriétés "grid-column-gap" et "grid-grow-gap" pour spécifier l'espacement entre les cellules de la grille dans le conteneur de grille.

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  border: 1px solid royalblue;
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  /*
    Si la taille de l'espace entre la grille et la colonne et entre la grille et la rangée est la même,
    vous pouvez juste écrire...
    gap: 1rem;
  */
}

tester ce code

Liens connexes

FLEXBOX AIDE MÉMOIRE
"Grid Garden" (apprendre le CSS Grid de manière ludique)
"A Complete Guide to Grid" (csstricks.com)
"Getting Started with CSS Grid" (css-tricks.com)
CSS Grid Generator (Outil visuel pour générer des schémas de grille CSS).

← Section About Styles Absolute & Relative →

Précédent9 Styles Suivant11 Absolu et relatif

Dernière mise à jour il y a 7 mois