
La propriété `align-items` est liée à la mise en page CSS. Elle affecte la façon dont les éléments sont alignés à la fois **dans les mises en page [Flexbox](/articles/flexbox-guide-complet) et [Grid](/articles/css-grid-layout-guide-complet)**.

- [align-items dans Flexbox](/articles/flexbox-guide-complet#align-items)
- [align-items dans Grid](/articles/css-grid-layout-guide-complet#ai)

## Syntaxe

```css
align-items: flex-start | flex-end | center | baseline | stretch;
```

La propriété `align-items` définit le comportement par défaut pour la disposition des éléments le long de l'axe transversal (perpendiculaire à l'axe principal).

Imaginez une mise en page flexbox horizontale. Ce flux horizontal est l'axe _principal_, donc align-items est l'alignement _opposé_ à celui-ci, sur l'axe _vertical_. Gardez à l'esprit que ça change évidemment lorsque l'axe principal change, et que l'axe transversal change avec lui.

Vous pouvez considérer `align-items` comme la version `justify-content` pour l'axe transversal (perpendiculaire à l'axe principal).

<p class="is-style-explanation">Le reste de cet article est plutôt axé sur flexbox plutôt que sur grid. Les concepts sont toujours très similaires, mais il existe quelques différences. Par exemple, dans flexbox, les axes peuvent changer, alors que dans grid ils ne le peuvent pas. Ça a pour conséquence par exemple le fait que flexbox a des valeurs comme `flex-start` alors que dans grid, c'est juste `start`.</p>

## Démo (flexbox)

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_AvXmrQ/2bfe2c024739bdd4098572f87d1bf585" src="//codepen.io/KittyGiraudel/embed/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585?height=640&amp;theme-id=light&amp;slug-hash=AvXmrQ/2bfe2c024739bdd4098572f87d1bf585&amp;user=KittyGiraudel&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/KittyGiraudel/pen/AvXmrQ/2bfe2c024739bdd4098572f87d1bf585">
  CSS-Tricks: :nth-last-child</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-items


La propriété `align-self` est une sous-propriété du module Flexible Box Layout. Elle permet de remplacer la valeur [align-items](/articles/align-items) pour des éléments flex spécifiques.

La propriété `align-self` accepte les 5 mêmes valeurs que la propriété `align-items`.

## Syntaxe

```css
align-self: auto | flex-start | flex-end | center | baseline | stretch
  .flex-item {
  align-self: flex-end;
}
```

## Démo

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_GBMZKR" src="//codepen.io/team/css-tricks/embed/GBMZKR?height=340?&amp;theme-id=light&amp;slug-hash=GBMZKR&amp;user=team/css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="340" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/GBMZKR">
  align-self demo</a> de css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


align-self

Alignement en CSS, un guide complet

Approfondir la propriété display : la génération de boîtes


Une mise en page `flex` ou `grid` commence par la déclaration `display: flex` ou `display: grid`. Ces méthodes de mise en page sont des valeurs de la propriété [CSS display]('https://developer.mozilla.org/fr/docs/Web/CSS/display'). Nous avons tendance à ne pas beaucoup parler de cette propriété en tant que telle, nous concentrant plutôt sur les valeurs de `flex` ou de `grid`. Cependant, il y a des choses intéressantes à comprendre au sujet de `display` et de la façon dont elle est définie, qui vous faciliteront grandement la vie lorsque vous utiliserez CSS pour votre mise en page.

Dans cet article, le premier d'une série de deux, je vais examiner la manière dont les valeurs de `display` sont définies dans la spécification de niveau 3. Il s'agit d'un changement par rapport à la façon dont nous définissions `display` dans les versions précédentes de CSS. Même s'ils peuvent déranger, de prime abord, ceux d'entre nous qui font du CSS depuis de nombreuses années, je pense que ces changements aident vraiment à expliquer ce qui se passe lorsque nous modifions la valeur `display` d'un élément.

## Éléments block et inline

L'une des premières choses que nous enseignons aux personnes qui découvrent le CSS, ce sont les concepts d'éléments en `block` et `inline`. Nous expliquons que certains éléments de la page sont `display : block` et qu'ils possèdent, de ce fait, certaines caractéristiques. Ils s'étirent dans le sens de la ligne, en occupant tout l'espace disponible. Ils s'ouvrent sur une nouvelle ligne&nbsp;; nous pouvons leur donner une largeur, une hauteur, une marge ainsi qu'un remplissage, et ces propriétés éloigneront d'autres éléments de la page.

Nous savons également que certains éléments sont `display : inline`. Les éléments en ligne sont comme les mots d'une phrase&nbsp;; ils ne provoquent pas un saut à la ligne, ils réservent un caractère d'espace blanc entre eux. Si vous ajoutez des marges et du padding, ces éléments s'afficheront mais ne repousseront pas les autres éléments.

Le comportement des éléments block et inline est fondamental pour CSS et pour qu'un document HTML correctement balisé soit lisible par défaut. Cette disposition est appelée "Block and Inline Layout" (_disposition en bloc et en ligne_) ou “Normal Flow” (_flux normal_), car c'est la façon dont les éléments se disposent si nous ne faisons rien d'autre pour eux.

## Valeurs internes et externes de display

Nous comprenons ces notions de block et inline, mais que se passe-t-il si nous appliquons `display: grid` à un élément ? Est-ce quelque chose de complètement différent&nbsp;? Si nous regardons un composant sur lequel nous avons spécifié `display: grid`, en tant qu'élément parent dans la mise en page il se comporte comme un élément de niveau bloc. L'élément s'étire et occupe tout l'espace disponible dans la dimension en ligne, il commence sur une nouvelle ligne. Il se comporte exactement comme un élément de type bloc en termes de comportement par rapport au reste de la mise en page. Pourtant nous n'avons pas dit `display: block`, n'est-ce pas&nbsp;?

En fait, il s'avère que si. Dans la [spécification Display](https://www.w3.org/TR/css-display-3/), niveau 3, la valeur de `display` est définie par deux mots-clés. Ces mots-clés définissent la valeur **externe** de display, qui sera `inline` ou `block` et définira donc _comment l'élément se comporte dans la mise en page par rapport aux éléments qui l'entourent_. Ils définissent également la valeur **interne** de l'élément —&nbsp;ou comment _les enfants directs_ de cet élément se comportent.

Autrement dit, que lorsque vous écrivez `display: grid`, ce que vous dites réellement c'est `display : block grid`. Vous demandez _un conteneur de grille de niveau bloc_. Un élément qui aura tous les attributs de `block` - vous pouvez lui donner une `height` et une `width`, une `margin` et un `padding`, et il s'étirera pour remplir le conteneur. Les enfants de ce conteneur, cependant, ont reçu la valeur interne de grid et deviennent donc des `items` de grille. Le comportement de ces _[grid items](/articles/css-grid-layout-guide-complet#griditem)_ est défini dans la spécification de grille CSS : la spécification de `display` nous donne un moyen d'indiquer au navigateur que c'est la méthode de mise en page que nous voulons utiliser.

Je pense que cette façon de considérer `display` est extrêmement utile&nbsp;; elle explique de façon claire et directe ce que nous faisons avec les différentes méthodes de mise en page. Si vous deviez spécifier `display: inline flex`, à quoi vous attendriez-vous&nbsp;? Eh bien sans doute à une boîte se comportant comme un élément inline, avec des enfants qui seraient des items flex.

Il y a quelques autres choses qui s'expliquent facilement lorsqu'on envisage `display` de cette nouvelle manière, et je vais en examiner quelques-unes dans la suite de cet article.

## Nous revenons toujours au flux normal

Pour comprendre ces propriétés d'affichage internes et externes, il peut être utile d'observer ce qui se passe si nous ne modifions pas du tout la valeur d'affichage. Si nous écrivons du HTML et que nous l'affichons dans un navigateur, nous obtenons une disposition en bloc et en ligne, ou un flux normal. Les éléments s'affichent comme des éléments bloc ou en ligne.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ZZzPQE" src="//codepen.io/rachelandrew/embed/ZZzPQE?height=400&amp;theme-id=light&amp;slug-hash=ZZzPQE&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

L'exemple ci-dessous contient des balises que j'ai transformées en objet média, en faisant en sorte que les `div` `display: flex` (les deux enfants directs) deviennent des items flex, de sorte que l'image se trouve maintenant dans une rangée avec le contenu. Si vous regardez le contenu cependant, il y a un titre et un paragraphe qui s'affichent à nouveau en flux normal. Les enfants directs de l'objet média sont devenus des items flex&nbsp;; leurs enfants reviennent à un flux normal à moins que nous ne changions la valeur de display sur l'item flex. Le conteneur flex lui-même est une boîte de niveau bloc, comme vous pouvez le voir par le fait que la bordure s'étend jusqu'aux bords de son parent.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_gyYEPz" src="//codepen.io/rachelandrew/embed/gyYEPz?height=530&amp;theme-id=light&amp;slug-hash=gyYEPz&amp;user=rachelandrew&amp;default-tab=result" scrolling="no" frameborder="0" height="530" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/rachelandrew/pen/ZZzPQE">
  Block and Inline Layout with Flex Component</a> de rachelandrew dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous travaillez ainsi, les éléments de votre page se disposeront d'eux-mêmes avec cette belle disposition de flux normal lisible, plutôt que de lutter contre et d'essayer de tout placer. Vous êtes également moins susceptible de rencontrer des problèmes d'accessibilité, car vous travaillez avec l'ordre du document, ce qui est exactement ce que fait un lecteur d'écran ou une personne qui navigue dans le document via la tabulation.

## Expliquer `flow-root` et `inline-block`

La valeur de `inline-block` est également susceptible d'être familière à ceux d'entre nous qui font du CSS depuis un certain temps. Cette valeur est un moyen d'[obtenir certains comportements de bloc sur un élément inline](/articles/la-difference-entre-block-et-inline). Par exemple, un élément [inline-block]('inline-block') peut avoir une largeur et une hauteur. Un élément avec `display: inline-block` se comporte également d'une manière intéressante en ce qu'il crée un contexte de formatage de type bloc (_Block Formatting Context_, BFC).

Un BFC fait certaines choses utiles en termes de mise en page, par exemple, il contient des floats. Pour en savoir plus sur les contextes de mise en forme des blocs, consultez mon article précédent intitulé "[Understanding CSS Layout And The Block Formatting Context](https://www.smashingmagazine.com/2017/12/understanding-css-layout-block-formatting-context/)". Par conséquent, dire `display: inline-block` vous donne une _boîte inline_ qui établit également un BFC.

Comme vous le découvrirez (si vous lisez l'article susmentionné sur le Contexte de formatage block), il existe une valeur plus récente de display qui crée aussi explicitement un BFC. Il s'agit de la valeur [`flow-root`](https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root). Cette valeur crée un BFC sur un bloc, plutôt que sur un élément inline.

- `display : inline-block` vous donne un BFC sur une boîte inline.
- `display : flow-root` vous donne un BFC sur une boîte block.

Vous vous dites probablement que tout cela est un peu confus&nbsp;: pourquoi avons-nous deux mots-clés complètement différents ici, et qu'est-il arrivé à la syntaxe à deux valeurs dont nous parlions auparavant&nbsp;? Eh bien cela nous amène justement à ce que je dois maintenant expliquer à propos de `display`&nbsp;: _CSS a un historique dont nous devons tenir compte_ en termes de propriété `display`.

### Valeurs historiques de la propriété display

La spécification CSS2 détaillait les valeurs suivantes pour la propriété `display`&nbsp;:

- `inline`
- `bloc`
- `inline-block`
- `list-item`
- `none`
- `table`
- `inline-table`

Nous avons également défini les diverses propriétés internes du tableau, telles que `table-cell`, dont nous ne nous occuperons pas dans cet article.

Nous avons ensuite ajouté à celles-ci quelques valeurs pour l'affichage, afin de prendre en charge la mise en page flex et grid&nbsp;:

- `grid`
- `inline-grid`
- `flex`
- `inline-flex`

Remarque : la spécification définit également `ruby` et `inline-ruby` pour prendre en charge le texte Ruby, ce que vous pouvez lire dans [la spécification Ruby](https://drafts.csswg.org/css-ruby-1/#ruby-def).

Ce sont toutes des valeurs uniques pour la propriété `display`, définies avant que la spécification ne soit mise à jour. Un aspect fondamental de la construction de CSS est que nous ne devons jamais casser le Web ; **nous ne pouvons pas _simplement_ changer les choses**. Nous ne pouvons pas décider soudainement que tout le monde doit utiliser cette nouvelle syntaxe à deux valeurs et que, par conséquent, tous les sites Web construits avec la syntaxe à une seule valeur se casseront si un développeur ne revient pas en arrière pour les corriger&nbsp;!

En réfléchissant à ce problème, vous apprécierez peut-être cette [liste d'erreurs](https://wiki.csswg.org/ideas/mistakes) dans la conception de CSS qui sont moins des erreurs dans de nombreux cas que des choses qui ont été conçues sans boule de cristal pour voir dans l'avenir&nbsp;! Cependant, le fait est que nous ne pouvons pas casser le Web, c'est pourquoi nous avons cette situation où actuellement les navigateurs supportent un ensemble de valeurs uniques pour l'affichage, et la spécification passe à deux valeurs pour l'affichage.

La façon dont nous contournons cette situation est de spécifier des valeurs anciennes et courtes pour l'affichage, ce qui inclut toutes ces valeurs uniques. Cela signifie qu'un mappage peut être défini entre les valeurs uniques et les nouvelles valeurs à deux mots-clés. Ce qui nous donne le tableau de valeurs suivant :

<table class='specificTable'><thead><tr><th>Valeur Simple</th><th>Valeur en 2 mots</th><th>Description</th></tr></thead><tbody><tr><td><code>block</code></td><td><code>block flow</code></td><td>Block box with normal flow inner</td></tr><tr><td><code>flow-root</code></td><td><code>block flow-root</code></td><td>Block box defining a BFC</td></tr><tr><td><code>inline</code></td><td><code>inline flow</code></td><td>Inline box with normal flow inner</td></tr><tr><td><code>inline-block</code></td><td><code>inline flow-root</code></td><td>Inline box defining a BFC</td></tr><tr><td><code>list-item</code></td><td><code>block flow list-item</code></td><td>Block box with normal flow inner and additional marker box</td></tr><tr><td><code>flex</code></td><td><code>block flex</code></td><td>Block box with inner flex layout</td></tr><tr><td><code>inline-flex</code></td><td><code>inline flex</code></td><td>Inline box with inner flex layout</td></tr><tr><td><code>grid</code></td><td><code>block grid</code></td><td>Block box with inner grid layout</td></tr><tr><td><code>inline-grid</code></td><td><code>inline grid</code></td><td>Inline box with inner grid layout</td></tr><tr><td><code>table</code></td><td><code>block table</code></td><td>Block box with inner table layout</td></tr><tr><td><code>inline-table</code></td><td><code>inline table</code></td><td>Inline box with inner table layout</td></tr></tbody></table>

Pour expliquer comment ça marche, nous prenons l'exemple d'un conteneur de grille. Dans le monde à deux valeurs, nous créerions un conteneur de grille de niveau bloc avec&nbsp;:

```css
.container {
  display: block grid;
}
```

Cependant, le mot-clé _legacy_ fait la même chose :

```css
.container {
  display: grid;
}
```

Si, à la place, nous voulions un conteneur de grille en ligne, dans le monde à deux valeurs, nous utiliserions :

```css
.container {
  display: inline grid;
}
```

et avec les valeurs _legacy_ :

```css
.container {
  display: inline-grid;
}
```

Après ce petit détour historique, nous pouvons maintenant revenir au point de départ de cette conversation et nous pencher sur `display: inline-block`. En regardant le tableau, vous pouvez voir que c'est défini dans le monde à deux valeurs comme `display: inline flow-root`. Il correspond maintenant à `display: flow-root` qui, dans un monde à deux valeurs, serait `display: block flow-root`. Un peu de rangement et de clarification de la façon dont ces choses sont définies. Une refactorisation de CSS, si vous voulez.

## Prise en charge de la syntaxe à deux valeurs par les navigateurs

Pour l'instant, les navigateurs ne prennent pas en charge la syntaxe à deux valeurs pour la propriété display. Le bogue d'implémentation pour Firefox peut être trouvé [ici](https://bugzilla.mozilla.org/show_bug.cgi?id=1038294). L'implémentation —&nbsp;lorsqu'elle aura lieu&nbsp;— consistera essentiellement à aliaser les anciennes valeurs vers les versions à deux valeurs. Il faudra donc attendre un bon moment avant que vous puissiez réellement utiliser ces versions à deux valeurs dans votre code. Cependant, ce n'est pas vraiment le sujet de cet article. Je pense plutôt que le fait d'examiner les valeurs d'affichage à la lumière du modèle à deux valeurs permet d'expliquer une grande partie de ce qui se passe.

Lorsque vous définissez la disposition d'une boîte en CSS, vous définissez ce qui arrive à cette boîte en termes de **comportement par rapport à toutes les autres boîtes de la mise en page**. Vous définissez également le comportement des enfants de cette boîte. Vous pouvez penser de cette manière bien avant de pouvoir déclarer explicitement les valeurs comme deux choses distinctes, car les mots-clés hérités correspondent à ces valeurs, et ça vous aidera à comprendre ce qui se passe lorsque vous modifiez la valeur de `display`.


Approfondir la propriété display : les deux valeurs de display

Les checkboxes (cases à cocher) sont épatantes, surtout quand vous les combinez avec un CSS astucieux. Cet article vise à montrer quelques petites choses créatives qu’on peut réaliser avec les checkboxes, et _sans JavaScript_.

<h2>La formule de base</h2>

Tout commence avec un peu de HTML :

    //HTML
    <input id="toggle" type="checkbox">
    <label for="toggle">

Rien de bien spécial ici. L’attribut `for` sur le `<label>` correspond à l’`id` qu’on retrouve sur `<input>`, par conséquent lorsqu’on clique sur `<label>` on bascule l’état de la case à cocher `<input>`. C’est important parce que la prochaine étape va consister à cacher la case `<input>`.

    //CSS
    input {
      position: absolute;
      left: -9999px;
    }

Pourquoi ne pas utiliser `display: none`&nbsp;? Parce qu’il serait ignoré par les lecteurs d’écran et la navigation par tabulation. La méthode de décalage de la position permet de garder `<input>` dans le circuit, mais hors écran.

Cacher `<input>` nous facilite le travail. Nous devons toutefois transmettre l’état coché/non coché, ce que nous pouvons faire avec `<label>`. Et c’est ici qu’on commence à s’amuser.

    //CSS
    input:checked + label {
      /* nos styles */
    }

Nous utilisons un mélange de [pseudo-classe :checked](https://developer.mozilla.org/fr/docs/Web/CSS/:checked) et de [combinateur adjacent](/articles/combinateurs-et-pseudo-classes-css/#combinateur-adjacent) (_adjacent sibling_) pour dire ceci&nbsp;: “quand la checkbox est cochée (_checked_), trouver le `<label>` immédiatement consécutif et appliquer nos styles”. Vous pouvez même utiliser des pseudo-éléments ([:before et :after](/articles/les-pseudo-elements-css-before-et-after/)) à l’intérieur de `<label>` pour plus de créativité encore.

    //CSS
    input:checked + label::before {
      /* styles pour un indicateur "on" */
    }

Très bien. Voyons tout cela en action. Cette démo utilise la formule basique dont nous venons de parler pour transformer les cases à cocher habituelles en quelque chose de plus impressionnant.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_RPZZPe" src="//codepen.io/lonekorean/embed/RPZZPe?height=300&amp;theme-id=light&amp;slug-hash=RPZZPe&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/RPZZPe/">
  Checkbox Trickery: Simple Toggle</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez que ce qu’il y a de bien, c’est que ça reste des checkboxes. Utilisez-les dans un formulaire et elles le soumettront exactement comme il faut&nbsp;: nous avons modifié leur apparence, pas leur comportement.

<h2 class="softTitleBlue">Cacher et montrer du contenu</h2>

Jusqu’ici, nous avons simplement appliqué quelques styles à `<label>` mais nous pouvons aller plus loin que cela. Cette démo cache et révèle dynamiquement des sections du formulaire en fonction des choix de l’utilisateur.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NqvvGK" src="//codepen.io/lonekorean/embed/NqvvGK?height=640&amp;theme-id=light&amp;slug-hash=NqvvGK&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/NqvvGK/">
  Checkbox Trickery: Form Disclosure</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

La pseudo-classe `:checked` fonctionne avec les boutons radio de la même façon qu’avec les cases à cocher. Voici le code HTML correspondant aux boutons radio “Comment avez-vous entendu parler de nous&nbsp;?” (_How did you hear about us?_)&nbsp;:

    //HTML
    <input id="how-friend" name="how" type="radio">
    <label for="how-friend" class="side-label">From a friend</label>

    <input id="how-internet" name="how" type="radio">
    <label for="how-internet" class="side-label">Somewhere on the internet</label>

    <input id="how-other" name="how" type="radio">
    <label for="how-other" class="side-label">Other...</label>

    <div class="how-other-disclosure">
      <label for="how-other-explain" class="top-label">Please explain</label>
      <textarea id="how-other-explain"></textarea>
    </div>

Le style des boutons radio est réalisé dans `<label>` via une combinaison de `:before` (pour le cercle externe) et `:after` (pour le point vert). Révéler ou cacher `:after` lorsqu’un bouton radio est coché ou décoché est très facile&nbsp;:

    //CSS
    .side-label::after {
      display: none;

      /* autres styles */
    }

    input:checked + .side-label::after {
      display: block;
    }

La `<div>` est cachée jusqu’à ce que le bouton radio “Other...” soit coché. Cette fois-ci, la `<div>` est cachée via `display: none` car je veux que le contenu soit ignoré par les lecteurs d’écran jusqu’à ce qu’il soit effectivement révélé. Le CSS permettant de révéler le contenu de la `<div>` lorsque le bouton radio est coché est le suivant&nbsp;:

    //CSS
    #how-other:checked ~ .how-other-disclosure {
      display: block;
    }

Jusqu’à présent, nous avons utilisé le combinateur adjacent `+` (plus), mais il est temps d’introduire [le combinateur général](https://la-cascade.io/combinateurs-et-pseudo-classes-css/#combinateur-general) `~` (tilde). Il fonctionne un peu de la même manière, mais sur des frères (_siblings_) non adjacents, comme notre `<div>`.

<h2>Arborescence de dossiers</h2>

Nous pouvons réutiliser les techniques de la démo précédente pour créer un widget d’arborescence de dossiers.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eNEEpB" src="//codepen.io/lonekorean/embed/eNEEpB?height=640&amp;theme-id=light&amp;slug-hash=eNEEpB&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="640" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/eNEEpB/">
  Checkbox Trickery: Folder Tree</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML d’un dossier individuel est donné ci-dessous. Le `<label>` est le dossier et les deux éléments `<a>` sont les “fichiers” à l’intérieur.

    //HTML
    <div>
      <input id="n-1" type="checkbox">
      <label for="n-1">Blue</label>
      <div class="sub">
        <a href="#link">Mana Leak</a>
        <a href="#link">Time Warp</a>
      </div>
    </div>

Des icônes de [Font Awesome](http://fortawesome.github.io/Font-Awesome/) sont utilisées pour indiquer l’état _checked_ (ouvert) ou _unchecked_ (fermé).

    //CSS
    label::before, a::before {
      display: block;
      position: absolute;
      top: 6px;
      left: -25px;
      font-family: ’FontAwesome’;
    }

    label::before {
      content: ’\f07b’; /* closed folder */
    }

    input:checked + label::before {
      content: ’\f07c’; /* open folder */
    }

    a::before {
      content: ’\f068’; /* dash */
    }

Le contenu situé à l’intérieur d’un dossier est montré ou caché via le combinateur général `~`. C’est pourquoi on a une `<div>` supplémentaire pour envelopper chaque dossier, afin d’éviter que le combinateur ne se propage son effet et n’ouvre les autres dossiers.

    //CSS
    input:checked ~ .sub {
      display: block;
    }

Évidemment, les dossiers peuvent être imbriqués. Cliquez sur le dossier “Multicolor” pour en voir un exemple.

Enfin, disons un mot sur notre bouton Reset.

    //HTML
    <input type="reset" value="Collapse All">

Les boutons de Reset de formulaires ne sont plus vraiment utilisés de nos jours, mais nous avons ici un bon cas d’usage. Si nous cliquons dessus, toutes les cases à cocher retournent à leur état initial non-coché, ce qui ferme tous les dossiers. Cool&nbsp;!

<h2>Listes scindées</h2>

Cette démo partage les items en deux listes distinctes, selon qu’ils sont cochés ou non.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xGLLwX" src="//codepen.io/lonekorean/embed/xGLLwX?height=660&amp;theme-id=light&amp;slug-hash=xGLLwX&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/xGLLwX/">
  Checkbox Trickery: To-Do List</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le HTML ressemble à ceci :

    //HTML
    <div class="items">
      <input id="item1" type="checkbox" checked>
      <label for="item1">Create a to-do list</label>

      

      <h2 class="done" aria-hidden="true">Done</h2>
      <h2 class="undone" aria-hidden="true">Not Done</h2>
    </div>

Le mécanisme de séparation des listes est obtenu via [Flexbox](/tags/flexbox/). Voici le CSS correspondant&nbsp;:

    //CSS
    .items {
      display: flex;
      flex-direction: column;
    }

    .done {
      order: 1;
    }

    input:checked + label {
      order: 2;
    }

    .undone {
      order: 3;
    }

    label {
      order: 4;
    }

CSS Flexbox nous permet de réordonner directement les éléments grâce à la propriété `order`. La valeur de la propriété passe de `4` à `2` lorsque la checkbox est cochée, ce qui la déplace de la partie inférieure “Not Done” vers la partie supérieure “Done”.

Malheureusement, la navigation via le clavier ainsi que [de nombreux lecteurs d’écran](http://sprungmarker.de/wp-content/uploads/css-a11y-group/css-a11y-flexbox.html) suivront l’ordre des éléments dans le DOM, même s’ils ont été visuellement réordonnés avec flexbox. Du coup, les titres “Done” et “Not Done” sont sans utilité pour les lecteurs d’écran —&nbsp;c’est pourquoi j’ai ajouté `aria-hidden="true"` pour eux, mieux vaut qu’ils soient ignorés plutôt que de créer de la confusion. À part cela, la liste scindée est opérationnelle via le clavier et les lecteurs d’écran annonceront l’état d’un item (checked/unchecked).

Si vous êtes intrigués par les compteurs à droite de “Done” et “Not Done”, ils sont générés par des [CSS counters](https://developer.mozilla.org/fr/docs/Web/CSS/Compteurs_CSS), voyez [cet article](http://codersblock.com/blog/fun-times-with-css-counters/) pour plus de détails.

<h2>Filtrage de groupes</h2>

C’est notre dernière démo. Nous allons voir comment mettre en valeur un tri croisé de données correspondant à un critère de sélection.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YXxxyj" src="//codepen.io/lonekorean/embed/YXxxyj?height=660&amp;theme-id=light&amp;slug-hash=YXxxyj&amp;user=lonekorean&amp;default-tab=result" scrolling="no" frameborder="0" height="660" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/lonekorean/pen/YXxxyj/">
  Checkbox Trickery: Group Filter</a> de Will Boyd dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voici le HTML abrégé. Remarquez que l’attribut `data-teams` est une liste d’attributs `id` de boutons radio séparés par un espace. C’est ainsi qu’on fait correspondre les personnages et les équipes.

    //HTML
    <input id="original" type="radio" name="team" checked>
    <label for="original">Original X-Men</label>

    

    <br>
    <ul class="characters">
      <li id="angel" data-teams="original force factor hellfire">
        <h2>Angel</h2>
        <img src="ct-angel.png" alt="">
      </li>

      
    </ul>

En ce qui concerne l’accessibilité, j’utilise des attributs `alt` vides parce que les noms de personnages sont déjà dans les balises `<h2>` —&nbsp;il n’est donc pas nécessaire, ni souhaitable, de les répéter. De plus, puisque je ne cache pas les éléments `<img>` (ils sont seulement rétrécis et décolorés), cela permet aux lecteurs d’écrans de “sauter” les personnages non sélectionnés, il me suffit de cacher la balise `<h2>`.

Voici le CSS qui fait ressortir les personnages lorsque leur équipe est sélectionnée&nbsp;:

    //CSS
    #original:checked ~ .characters [data-teams~="original"] h2,
    #force:checked ~ .characters [data-teams~="force"] h2,
    #factor:checked ~ .characters [data-teams~="factor"] h2,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] h2 {
      /* styles to show character name */
    }

    #original:checked ~ .characters [data-teams~="original"] img,
    #force:checked ~ .characters [data-teams~="force"] img,
    #factor:checked ~ .characters [data-teams~="factor"] img,
    #hellfire:checked ~ .characters [data-teams~="hellfire"] img {
      /* styles to show character avatar */
    }

Ok, je reconnais que ces sélecteurs sont un peu touffus, mais en fait ce n’est pas si compliqué. Analysons la ligne 1 par exemple. Si on l’exprime en bon français, ça donne ceci&nbsp;: lorsque l’élément ayant une `id` ‘original’ est coché, chercher le ou les éléments frères (_general sibling_) ayant la classe de ‘personnages’ (_characters_) et contenant un attribut `data-teams` dans lequel se trouve ‘original’, puis aller chercher la balise `<h2>` située à l’intérieur.
On répète avec ‘force’, ‘factor’ et ‘hellfire’ dans les lignes 2 à 4. Enfin, on reproduit le schéma dans le second bloc, mais cette fois-ci pour `<img>` à la place de `<h2>`.

<h3>En guise de conclusion</h3>

J’espère que vous avez eu autant de plaisir à jouer avec ces démos que j’en ai eu à les créer. C’était une expérience très intéressante de voir qu’on pouvait tirer quelque chose d’un élément aussi modeste que les cases à cocher. Je n’ai rien contre l’utilisation de JavaScript, lorsqu’elle est appropriée, mais c’est sympa de voir tout ce qu’on peut accomplir sans JS. Merci d’avoir lu cet article&nbsp;!

Astuces CSS avec checkbox


Le centrage en CSS est souvent un casse-tête. _Pourquoi faut-il que ce soit si difficile ?_ En fait, la difficulté ne vient pas du centrage lui-même mais de la multiplicité des techniques disponibles pour centrer en CSS et qui dépendent chacune de la situation. La vraie difficulté est donc de savoir quelle technique utiliser dans une situation donnée.

Nous allons lister toutes ces situations et en principe vous serez équipé pour la route.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Chris Coyier s'intéresse ici au **centrage en général**, pour une introduction complète au **centrage d'une div**, consultez l'article_ [Centrer un bloc Div, guide complet](/articles/centrer-une-div-guide-complet), _de Steve Pear_.

Si je veux centrer...

## Centrer horizontalement

### Éléments inline ou inline-\* (p.ex. texte ou lien)?

Vous pouvez centrer horizontalement des [éléments inline](/articles/la-difference-entre-block-et-inline/) à l'intérieur d'un élément parent de niveau bloc avec cette ligne simple&nbsp;:

    //CSS
    .center-children {
      text-align: center;
    }

Voici ce que ça donne sur Code Pen (_comme toujours, vous pouvez cliquer sur HTML et CSS pour voir le code, sur Result pour voir le résultat, et sur Edit si vous voulez voir l'original sur Code Pen et jouer avec_)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_HulzB" src="//codepen.io/chriscoyier/embed/HulzB?height=300&amp;theme-id=light&amp;slug-hash=HulzB&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/HulzB/">
  Centering Inline Elements</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ça fonctionnera très bien avec inline, inline-block, inline-table, inline-flex, etc.

### Éléments block ?

Vous pouvez centrer un élément [de niveau bloc](/articles/la-difference-entre-block-et-inline/) en lui donnant une marge gauche et droite automatique, ce qui se traduit par&nbsp;:

    //CSS
    .center-me {
      margin: 0 auto;
    }

NB : Il va de soi que l'élément en question a une largeur déterminée, sinon il prendrait toute la largeur de l'élément parent et n'aurait pas besoin d'être centré.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_eszon" src="//codepen.io/chriscoyier/embed/eszon?height=300&amp;theme-id=light&amp;slug-hash=eszon&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="250" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/eszon/">
  Centering Single Block Level Element</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ça marchera quelle que soit la largeur de l'élement bloc que vous voulez centrer ou celle de son élément parent.

### Y a-t-il plus d'un élément block ?

Si vous avez deux éléments blocs, ou plus, à centrer dans une rangée, une bonne solution consistera souvent à changer le type de `display`. Voici deux exemples, le premier utilise `display: inline-block`, le second utilise [Flexbox](/articles/flexbox-guide-complet/)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ebing" src="//codepen.io/chriscoyier/embed/ebing?height=300&amp;theme-id=light&amp;slug-hash=ebing&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="470" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ebing/">
  Centering Row of Blocks</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Voilà pour les rangées. Et si vous avez plusieurs éléments blocks empilés les uns sur les autres, la technique de marge automatique fonctionne parfaitement&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_haCGt" src="//codepen.io/chriscoyier/embed/haCGt?height=300&amp;theme-id=light&amp;slug-hash=haCGt&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="380" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/haCGt/">
  Centering Blocks on Top of Each Other</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Centrer verticalement

Le centrage vertical est un peu plus délicat en CSS.

### Éléments inline ou inline-\* (p.ex. texte ou lien)?

#### Est-ce une ligne unique ?

Des éléments inline ou texte peuvent apparaître centrés verticalement parfois simplement parce qu'il y a un padding top et bottom égal&nbsp;:

    //CSS
    .link {
      padding-top: 30px;
      padding-bottom: 30px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ldcwq" src="//codepen.io/chriscoyier/embed/ldcwq?height=300&amp;theme-id=light&amp;slug-hash=ldcwq&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="240" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ldcwq/">
  Centering text (kinda) with Padding</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Si vous ne pouvez pas utiliser le padding et que vous cherchez à centrer un texte qui doit rester sur une ligne unique, le truc est de donner à la propriété `line-height` la même valeur qu'à `height`.

    //CSS
    .center-text-trick {
      height: 100px;
      line-height: 100px;
      white-space: nowrap;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LxHmK" src="//codepen.io/chriscoyier/embed/LxHmK?height=300&amp;theme-id=light&amp;slug-hash=LxHmK&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="340" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/LxHmK/">
  Centering a line with line-height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### Ou des lignes multiples ?

Là aussi on peut obtenir le centrage avec des padding top et bottom égaux.

Si pour une raison quelconque vous ne pouvez pas utiliser cette technique, peut-être l'élément dans lequel est situé le texte est-il une cellule de tableau, ou bien on peut forcer cet élément à se comporter comme s'il était une cellule. La propriété `vertical-align` gère cette situation, puisqu'elle sert habituellement à aligner des contenus situés sur une rangée.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ekoFx" src="//codepen.io/chriscoyier/embed/ekoFx?height=300&amp;theme-id=light&amp;slug-hash=ekoFx&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="500" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ekoFx/">
  Centering text (kinda) with Padding</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Une autre solution consiste à [utiliser flexbox](/articles/flexbox-guide-complet/). Centrer un flex-child dans un flex-parent est assez facile&nbsp;:

    //CSS
    .flex-center-vertically {
      display: flex;
      justify-content: center;
      flex-direction: column;
      height: 400px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_uHygv" src="//codepen.io/chriscoyier/embed/uHygv?height=300&amp;theme-id=light&amp;slug-hash=uHygv&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="380" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/uHygv/">
  Vertical Center Multi Lines of Text with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

N'oubliez pas que cela fonctionne uniquement si le container parent a une hauteur fixe (en px, en % ou ce que vous voulez), c'est pourquoi le container ici a une hauteur.

Si vous ne pouvez utiliser aucune de ces techniques, il vous reste encore celle du &ldquo;ghost-element&rdquo;, l'élément fantôme, dans lequel un pseudo-élément prenant toute la hauteur est placé à l'intérieur du container et le texte est aligné verticalement sur lui&nbsp;:

    //CSS
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_ofwgD" src="//codepen.io/chriscoyier/embed/ofwgD?height=300&amp;theme-id=light&amp;slug-hash=ofwgD&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="400" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/ofwgD/">
  Ghost Centering Multi Line Text</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Élements block

#### Connaissez-vous la hauteur de l'élément ?

Il est assez courant de ne pas connaître la hauteur d'un élément, pour des tas de raisons&nbsp;: Si la largeur change, la réorganisation du texte peut changer la hauteur, une modification du style du texte peut également changer la hauteur, de même qu'un ajout de texte... Idem si le <span itemprop="about">ratio d'aspect</span> de votre image est fixe, tout redimensionnement entraînera une modification de sa hauteur.

Mais si vous connaissez sa hauteur, vous pouvez le centrer avec&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      height: 100px;
      margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_HiydJ" src="//codepen.io/chriscoyier/embed/HiydJ?height=300&amp;theme-id=light&amp;slug-hash=HiydJ&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="440" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/HiydJ/">
  Center Block with Fixed Height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### La hauteur de l'élément est-elle inconnue ?

Si vous ne connaissez pas la hauteur de l'élément, vous pouvez le centrer en le remontant de la moitié de sa hauteur après l'avoir fait descendre de la moitié de la hauteur du contenant&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_lpema" src="//codepen.io/chriscoyier/embed/lpema?height=300&amp;theme-id=light&amp;slug-hash=lpema&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="440" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/lpema/">
  Center Block with Unknown Height</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

#### Pouvez-vous utiliser Flexbox ?

Sans surprise, c'est bien plus facile avec [flexbox](http://css-tricks.com/snippets/css/a-guide-to-flexbox/).

    //CSS
    .parent {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_FqDyi" src="//codepen.io/chriscoyier/embed/FqDyi?height=300&amp;theme-id=light&amp;slug-hash=FqDyi&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="460" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/FqDyi/">
  Center Block with Unknown Height with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Horizontalement et verticalement

Vous pouvez combiner les techniques qui précèdent pour obtenir des éléments parfaitement centrés. Mais il me semble qu'elles peuvent se regrouper en trois catégories&nbsp;:

### Éléments de hauteur et largeur fixes

Vous pouvez utiliser des marges négatives égales à la moitié de cette hauteur et de cette largeur, un positionnement absolu à 50%/50% centrera l'élément&nbsp;:

    //CSS
    .parent {
      position: relative;
    }

    .child {
      width: 300px;
      height: 100px;
      padding: 20px;

      position: absolute;
      top: 50%;
      left: 50%;

      margin: -70px 0 0 -170px;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_JGofm" src="//codepen.io/chriscoyier/embed/JGofm?height=300&amp;theme-id=light&amp;slug-hash=JGofm&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/JGofm/">
  Center Block with Fixed Height and Width</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Éléments de hauteur et largeur inconnues

Si vous ne connaissez pas la largeur ou la hauteur, vous pouvez utiliser la propriété `transform` et une translation négative de 50% dans les deux directions (elle sera basée sur les largeur et hauteur actuelles de l'élément)&nbsp;:

    //CSS
    .parent {
      position: relative;
    }
    .child {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_lgFiq" src="//codepen.io/chriscoyier/embed/lgFiq?height=300&amp;theme-id=light&amp;slug-hash=lgFiq&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/lgFiq/">
  Center Block with Unknown Height and Width</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

### Pouvez-vous utiliser Flexbox ?

Pour centrer dans les deux directions avec flexbox, vous devez utiliser deux propriétés de centrage&nbsp;:

    //CSS
    .parent {
      display: flex;
      justify-content: center;
      align-items: center;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_msItD" src="//codepen.io/chriscoyier/embed/msItD?height=300&amp;theme-id=light&amp;slug-hash=msItD&amp;user=chriscoyier&amp;default-tab=result" scrolling="no" frameborder="0" height="360" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/chriscoyier/pen/msItD/">
  Center Block with Unknown Height and Width with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Conclusion

Centrer horizontalement, centrer verticalement, vous pouvez tout <span itemprop="about">centrer sans problème</span> en CSS&nbsp;!


Centrer en CSS, un guide complet


Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le _contenu d'une div_ est simple, mais centrer _la div elle-même_ est plus délicat, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur.

<figure role="group"><img src="/images/Big_Lewbowski_World_Of_Pain_New_Brown_Shirt-compressor.jpeg" alt="citation du film The Big Lebowski, you are entering a world of pain"/></figure>

L'objectif de cet article est de montrer comment centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div.

<span aria-hidden="true" data-icon="&#9758;"></span> _NdT : Steve Pear s'intéresse ici spécifiquement au **centrage d'une div** : pour une introduction complète au **centrage du contenu** d'une div, consultez l'article_ [Centrer en CSS, un guide complet](/articles/centrer-en-css-un-guide-complet), _de Chris Coyier&nbsp;: le centrage du contenu d'une div n'est pas aussi simple que le dit Steve Pear&nbsp;!_

## Centrer une div dans une page, les bases

Cette méthode fonctionne avec n'importe quel navigateur.

    .center-div {
         margin: 0 auto;
         width: 100px;
    }

Le résultat dans CodePen (vous pouvez cliquer sur HTML et CSS pour en voir le contenu ou sur _edit on CodePen_ pour le modifier)&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_voseD" src="//codepen.io/Tipue/embed/voseD?height=270&amp;theme-id=light&amp;slug-hash=voseD&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="270" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/voseD/">
  Centering a div in a page, basic</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La valeur `auto` de la propriété `margin` donne aux marges gauche et droite l'espace restant disponible dans la page. Il faut bien se rappeler de donner une propriété `width` à votre div.

## Centrer une div dans une div, à l'ancienne

Cela fonctionne avec à peu près tous les navigateurs.

    .outer-div {
         padding: 30px;
    }
    .inner-div {
         margin: 0 auto;
         width: 100px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

Le résultat dans CodePen&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_apDLG" src="//codepen.io/Tipue/embed/apDLG?height=320&amp;theme-id=light&amp;slug-hash=apDLG&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/apDLG/">
  Centering a div within a div, old-school</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La marge `auto` frappe encore, et la div intérieure doit avoir une propriété `width`.

<figure role="group"><img src="/images/world-of-pain-1.jpeg" alt="image tirée du film The Big Lebowski, avec les protagonistes au bowling"/><figcaption>“On vous l'avait bien dit les gars...”</figcaption></figure>

## Centrer une div dans une div avec inline-block

Avec la méthode [inline-block](/articles/la-difference-entre-block-et-inline/), la div intérieure n'a pas besoin de propriété `width`. Fonctionne avec tous les navigateurs raisonnablement modernes.

    .outer-div {
         padding: 30px;
         text-align: center;
    }
    .inner-div {
         display: inline-block;
         padding: 50px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_Ednlt" src="//codepen.io/Tipue/embed/Ednlt?height=320&amp;theme-id=light&amp;slug-hash=Ednlt&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/Ednlt/">
  Centering a div within a div with inline-block</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La propriété `text-align` ne fonctionne qu'avec les éléments inline. La valeur `inline-block` affiche la div intérieure comme un élément inline _et_ block, ce qui permet à la propriété `text-align` de la div extérieure de centrer la div intérieure.

## Centrer une div dans une div, horizontalement et verticalement

On utilise l'astuce `margin auto` pour centrer une div dans le sens horizontal et vertical, et cela fonctionne avec tous les navigateurs modernes.

    .outer-div {
         padding: 30px;
    }
    .inner-div {
         margin: auto;
         width: 100px;
         height: 100px;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

Le résultat dans CodePen&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_vsKif" src="//codepen.io/Tipue/embed/vsKif?height=320&amp;theme-id=light&amp;slug-hash=vsKif&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/vsKif/">
  Centering a div within a div, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir des propriétés `width` et `height`. Cette méthode ne fonctionne pas si la div extérieure a une hauteur fixe.

## Centrer verticalement une div avec transform

Cette méthode utilise `transform` pour centrer verticalement tout contenu à l'intérieur d'une div. On fait appel à un élément HTML vide qui sert de conteneur, ici j'ai choisi `<p>`.

```
.center-div p
{
     position: relative;
     top: 50%;
     transform: perspective(1px) translateY(-50%);
}

// HTML
    <div class="center-div">
    	<p>Esse augue dolor</p>
    </div>
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NXwGqB" src="//codepen.io/Tipue/embed/NXwGqB?height=350&amp;theme-id=light&amp;slug-hash=NXwGqB&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="350" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/NXwGqB">
  Vertical center in a div with transform</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La valeur `perspective` réduit le flou (_blurring_) sur un affichage haute-définition. Pour une meilleure compatibilité avec les navigateurs anciens, vous pouvez utiliser les préfixes constructeurs comme `-webkit-transform` et `-ms-transform`. Ce dernier remonte jusqu'à IE9.

## Centrer une div en bas de page

Ici, on utilise `margin auto` et une div externe [positionnée absolument](/articles/le-positionnement-css). Fonctionne avec tous les navigateurs modernes.

    .outer-div {
         position: absolute;
         bottom: 30px;
         width: 100%;
    }
    .inner-div {
         margin: 0 auto;
         width: 100px;
         height: 100px;
         background-color: #ccc;
    }

    //HTML

    <div class="outer-div">
    	<div class="inner-div">
        </div>
    </div>

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_bwLDh" src="//codepen.io/Tipue/embed/bwLDh?height=300&amp;theme-id=light&amp;slug-hash=bwLDh&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/bwLDh/">
  Centering a div at the bottom of a page</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir une propriété `width`. La distance la séparant du bas de page est définie grâce à la propriété `bottom` de la div extérieure.

Pour centrer une div en haut de page, remplacez la propriété `bottom` par `top`.

## Centrer une div dans une page, horizontalement et verticalement

On utilise là encore `margin auto`, et une div extérieure positionnée absolument. Fonctionne avec tous les navigateurs modernes.

    .center-div {
         position: absolute;
         margin: auto;
         top: 0;
         right: 0;
         bottom: 0;
         left: 0;
         width: 100px;
         height: 100px;
         background-color: #ccc;
    }

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_CBbna" src="//codepen.io/Tipue/embed/CBbna?height=300&amp;theme-id=light&amp;slug-hash=CBbna&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/Tipue/pen/CBbna/">
  Centering a div in a page, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div doit avoir les propriétés `width` et `height`.

## Centrer une div dans une page, responsive

La largeur de la div est responsive, elle s'adapte à la largeur du viewport. Fonctionne sur tous les navigateurs.

```
.center-div
{
     margin: 0 auto;
     max-width: 700px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_sGHuI" src="//codepen.io/Tipue/embed/sGHuI?height=300&amp;theme-id=light&amp;slug-hash=sGHuI&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/sGHuI">
  Centering a div in a page, responsive</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div centrée doit avoir une propriété `max-width`.

## Centrer une div dans une div responsive

La div intérieure est responsive. Fonctionne avec tous les navigateurs.

```
.outer-div
{
     padding: 30px;
}
.inner-div
{
     margin: 0 auto;
     max-width: 700px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_yAbdC" src="//codepen.io/Tipue/embed/yAbdC?height=320&amp;theme-id=light&amp;slug-hash=yAbdC&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/yAbdC">
  Centering a div within a div, inner div responsive</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La div intérieure doit avoir une propriété `max-width`.

## Centrer deux divs responsives, côte à côte

Deux divs côte à côte, toutes les deux sont responsives. Fonctionne avec tous les navigateurs.

```
.container
{
     text-align: center;
}
.left-div
{
     display: inline-block;
     max-width: 300px;
     vertical-align: top;
}
.right-div
{
     display: inline-block;
     max-width: 150px;
}
@media screen and (max-width: 600px)
{
     .left-div, .right-div
     {
          max-width: 100%;
     }
}

//HTML

<div class="container">
    <div class="left-div">
    </div>
    <div class="right-div">
    </div>
</div>
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_pjdgad" src="//codepen.io/Tipue/embed/pjdgad?height=320&amp;theme-id=light&amp;slug-hash=pjdgad&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="320" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/pjdgad">
  Centering two responsive divs, side by side</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

Pour cela on utilise juste deux éléments `inline-block` dans un conteneur centré. Notez qu'on fait également appel à la media query de CSS. Lorsque la taille d'écran est inférieure à 600px, la propriété `max-width` de chacune des divs est fixée à 100%.

## Flexbox et le centrage de div

<figure role="group"><img src="/images/dudeism-compressor.jpeg" alt="image tirée du film The Big Lebowski"/></figure>

Le nouveau modèle de mise en page Flexbox simplifie le centrage. L'exemple ci-dessous centre une div horizontalement et verticalement.

```
.container
{
     display: flex;
     align-items: center;
     justify-content: center;
     height: 100vh;
}
.item
{
     background-color: #f3f2ef;
     border-radius: 3px;
     width: 200px;
     height: 100px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_QbrvYe" src="//codepen.io/Tipue/embed/QbrvYe?height=300&amp;theme-id=light&amp;slug-hash=QbrvYe&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/QbrvYe">
  Flexbox, div centered</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

La propriété `height` du conteneur peut être ce qu'on veut, du moment qu'elle est plus large que la div centrée. Dans cet exemple, nous utilisons `vh`, qui est la hauteur de la fenêtre du navigateur, le viewport, plutôt que la hauteur de la page.

## Centrer une div dynamique, horizontalement et verticalement

Cette méthode utilise la propriété `display` avec une valeur de `table`, ce qui lui donne le comportement d'un élément `table` et centre la div horizontalement et verticalement. La div centrée peut avoir un contenu dynamique, et donc une hauteur ou une largeur variable. Elle peut être responsive.

```
.outer-div
{
     display: table;
     position: absolute;
     height: 100%;
     width: 100%;
}
.mid-div
{
     display: table-cell;
     vertical-align: middle;
}
.center-div
{
     margin: 0 auto;
     width: 300px;
     height: 100px;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PEEOYp" src="//codepen.io/Tipue/embed/PEEOYp?height=300&amp;theme-id=light&amp;slug-hash=PEEOYp&amp;user=Tipue&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/Tipue/pen/PEEOYp">
  Centering a dynamic div, horizontally and vertically</a> de Steve Pear dans <a href="https://codepen.io">CodePen</a></span>
</div>

Les propriétés `width` et `height` de la div centrée peuvent être ce que vous voulez.

---

<h2 class="ressourcesComplementaires">Ressources complémentaires</h2>

Consultez également dans La Cascade :

- [Alignement en CSS, guide complet](/articles/alignement-en-css-guide-complet)
- [Centrer en CSS, guide complet](/articles/centrer-en-css-un-guide-complet)
- [CSS Flexbox et l'alignement, guide complet](/articles/css-flexbox-et-lalignement-guide-complet)


Centrer un bloc div, guide complet

Comment apprendre CSS


Lorsque nous appliquons une propriété CSS à un élément, il se passe beaucoup de choses en coulisses. Par exemple, disons que nous avons ce HTML&nbsp;:

```html
<div class="parent">
  <div class="child">Child</div>
  <div class="child">Child</div>
  <div class="child">Child</div>
</div>
```

...et nous ajoutons ce CSS :

```css
.parent {
  display: flex;
}
```

Techniquement, ce ne sont pas les _seuls_ styles que nous appliquons lorsque nous écrivons la ligne de CSS ci-dessus. En fait, tout un tas de propriétés seront appliquées aux éléments `.child` ici, comme si nous avions écrit ces styles nous-mêmes&nbsp;:

```css
.child {
  flex: 0 1 auto; /* valeurs flex par défaut */
}
```

Étrange ! Pourquoi ces éléments ont-ils ces styles supplémentaires qui leur sont appliqués alors que nous n'avons pas écrit ce code&nbsp;? Eh bien, c'est parce que certaines propriétés ont des valeurs _par défaut_ qui sont ensuite destinées à être remplacées par nous. Et si nous ne savons pas que ces styles sont appliqués lorsque nous écrivons le CSS, nos mises en page peuvent devenir assez déroutantes et difficiles à gérer.

La propriété `flex` ci-dessus est ce que l'on appelle une propriété CSS _abrégée_ (ou raccourcie : _shorthand_). En fait, ce que ça fait c'est qu'on définit trois propriétés CSS distinctes en même temps. Ce que nous avons écrit ci-dessus revient donc à écrire ceci&nbsp;:

```css
.child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}
```

Une propriété raccourcie est donc une façon de _regrouper_ un tas de propriétés CSS différentes pour faciliter l'écriture de plusieurs propriétés à la fois, précisément comme la propriété `background` où nous pouvons écrire quelque chose comme ceci :

```css
body {
  background: url(sweettexture.jpg) top center no-repeat fixed
    padding-box content-box red;
}
```

J'essaie d'éviter les propriétés raccourcies car elles peuvent être assez déroutantes et j'ai souvent tendance à écrire les versions longues à la main, simplement parce que mon cerveau ne parvient pas à analyser de longues lignes de valeurs de propriétés. Mais il est [recommandé](https://drafts.csswg.org/css-flexbox/#flex-grow-property) d'utiliser le raccourci lorsqu'il s'agit de flexbox, ce qui semble... bizarre... c'est-à-dire jusqu'à ce que vous compreniez que la propriété `flex` fait beaucoup de travail et que chacune de ses sous-propriétés interagit avec les autres.

En outre, les styles par défaut sont une bonne chose car nous n'avons pas besoin de savoir ce que font ces propriétés flexbox dans 90&nbsp;% des cas. Par exemple, lorsque j'utilise flexbox, j'ai tendance à écrire quelque chose comme&nbsp;:

```css
.parent {
  display: flex;
  justify-content: space-between;
}
```

Je n'ai même pas besoin de me soucier des éléments enfants ou des styles qui leur ont été appliqués, et c'est super&nbsp;! Dans ce cas, nous alignons les éléments enfants côte à côte, puis nous les espaçons de manière égale les uns des autres. Deux lignes de CSS nous donnent beaucoup de pouvoir ici et c'est ce qu'il y a de mieux avec flexbox et ces styles hérités —&nbsp;_nous n'avons pas besoin de comprendre toute la complexité sous le capot_ si nous voulons simplement faire la même chose 90&nbsp;% du temps. C'est remarquablement intelligent car toute cette complexité est cachée.

Mais qu'en est-il si nous voulons comprendre le fonctionnement réel de flexbox, y compris les propriétés `flex-grow`, `flex-shrink` et `flex-basis`&nbsp;? Et quelles choses sympas pouvons-nous faire avec elles&nbsp;?

Il suffit de consulter l'[Almanach CSS-Tricks](https://css-tricks.com/almanac/). Et c'est bon&nbsp;!

Nan, je plaisante. Commençons par un aperçu rapide et un peu simplifié, et revenons aux propriétés `flex` par défaut qui sont appliquées aux éléments enfants&nbsp;:

```css
.child {
  flex: 0 1 auto;
}
```

Ces styles par défaut indiquent à cet élément enfant comment s'étirer et se développer. Mais chaque fois que je vois qu'ils sont utilisés ou remplacés, je trouve utile de penser à ces propriétés abrégées comme ceci&nbsp;:

```css
/* C'est ainsi que je vois la règle ci-dessus dans ma tête */

.child {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/* ou bien comme ça... */

.child {
  flex: [max] [min] [taille idéale];
}
```

La première valeur est `flex-grow` et elle est réglée sur 0 car, par défaut, nous ne voulons pas que nos éléments s'étendent (la plupart du temps). Nous voulons plutôt que chaque élément dépende de la taille du contenu qu'il contient. Voici un exemple :

```css
.parent {
  display: flex;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_xxOjNav/bc3d06b3162c4163a9e51ccd91913986" src="//codepen.io/robinrendle/embed/xxOjNav/bc3d06b3162c4163a9e51ccd91913986?height=300&amp;theme-id=light&amp;slug-hash=xxOjNav/bc3d06b3162c4163a9e51ccd91913986&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/xxOjNav/bc3d06b3162c4163a9e51ccd91913986">
  flex-grow-default</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

J'ai ajouté la propriété `contenteditable` à chaque élément `.child` ci-dessus pour que vous puissiez cliquer dessus et saisir encore plus de contenu. Vous voyez comment ça réagit&nbsp;? C'est le comportement par défaut d'un élément flexbox : `flex-grow` est défini sur 0 car nous voulons que l'élément grandisse en fonction du contenu qu'il contient.

Mais ! Si nous devions changer la valeur par défaut de la propriété flex-grow de 0 à 1, comme ceci...

```css
.child {
  flex: 1 1 auto;
}
```

...alors, tous les éléments prendraient une part égale de l'élément `.parent`, mais _seulement si les longueurs de leurs contenus sont les mêmes_.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_Pozeryd/7aab5c7671016f4c76401020568d49b0" src="//codepen.io/robinrendle/embed/Pozeryd/7aab5c7671016f4c76401020568d49b0?height=300&amp;theme-id=light&amp;slug-hash=Pozeryd/7aab5c7671016f4c76401020568d49b0&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/Pozeryd/7aab5c7671016f4c76401020568d49b0">
  flex-grow-default-1</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

C'est exactement comme si j'avais écrit&nbsp;:

```css
.child {
  flex-grow: 1;
}
```

...en laissant de côté les autres valeurs parce que celles-ci ont été définies par défaut de toute façon. Je pense que cela m'a _longtemps_ perturbé lorsque j'ai commencé à travailler avec des mises en page flexibles. Je voyais du code qui ajoutait juste `flex-grow` et je me demandais d'où venaient les autres styles.

Maintenant, si nous voulions qu'un seul de ces éléments croisse plus que les autres, il nous suffirait de faire&nbsp;:

```css
.child-three {
  flex: 3 1 auto;
}

/* ou bien nous pourrions simplement écrire... */

.child-three {
  flex-grow: 3;
}
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0" src="//codepen.io/robinrendle/embed/zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0?height=300&amp;theme-id=light&amp;slug-hash=zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/zYBjQMQ/a0492e0d5913e92c2e2a6fee17e065b0">
  flex-grow-default-2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Ce code est-il étrange à regarder, même dix ans après l'arrivée de Flexbox dans les navigateurs&nbsp;? Il l'est certainement pour moi. J'ai besoin d'une puissance cérébrale supplémentaire pour dire "Ah oui, max, min, taille idéale" lorsque je lis le raccourci, mais ça s'améliore avec le temps. Quoi qu'il en soit, dans l'exemple ci-dessus, les deux premiers éléments enfants occuperont proportionnellement la même quantité d'espace, mais le troisième élément essaiera de croître jusqu'à trois fois l'espace des autres.

C'est là que les choses deviennent étranges, car tout dépend du contenu des éléments enfants. Même si nous avons défini `flex-grow` à `3`, comme nous l'avons fait dans l'exemple ci-dessus, si nous ajoutons ensuite plus de contenu, la mise en page fera quelque chose d'étrange comme ceci&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_LYZmKqj/480cd39e0ef5f98f6d82706f0478a504" src="//codepen.io/robinrendle/embed/LYZmKqj/480cd39e0ef5f98f6d82706f0478a504?height=300&amp;theme-id=light&amp;slug-hash=LYZmKqj/480cd39e0ef5f98f6d82706f0478a504&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/LYZmKqj/480cd39e0ef5f98f6d82706f0478a504">
  flex-grow-3</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Cette deuxième colonne prend maintenant trop d'espace ! Nous y reviendrons plus tard, mais pour l'instant, il est juste important de se rappeler que le contenu d'un élément flex a un impact sur la façon dont `flex-grow`, `flex-shrink` et `flex-basis` fonctionnent ensemble.

OK, passons maintenant à `flex-shrink`. Rappelez-vous que c'est la deuxième valeur dans le raccourci&nbsp;:

```css
.child {
  flex: 0 1 auto; /* flex-shrink = 1 */
}
```

`flex-shrink` indique au navigateur quelle doit être la taille minimale d'un élément. La valeur par défaut est 1, ce qui revient à dire&nbsp;: "Prenez la même quantité d'espace à tout moment". Cependant, si nous définissons cette valeur à 0 comme ceci&nbsp;:

```css
.child {
  flex: 0 0 auto;
}
```

...alors nous disons à cet élément de ne pas rétrécir du tout maintenant. _Reste à la même taille, maudit élément_&nbsp;! c'est en substance ce que dit cette CSS, et c'est précisément ce qu'elle va faire. Nous reviendrons sur cette propriété dans un instant, une fois que nous aurons examiné la valeur finale de ce raccourci.

`flex-basis` est la dernière valeur ajoutée par défaut dans le raccourci `flex`, et c'est la façon dont nous indiquons à un élément de s'en tenir à une taille idéale. Par défaut, elle est définie sur `auto`, ce qui signifie "Utilisez ma hauteur ou ma largeur". Ainsi, lorsque nous définissons un élément parent pour `display: flex`...

```css
.parent {
  display: flex;
}

.child {
  flex: 0 1 auto;
}
```

Nous aurons ceci par défaut dans le navigateur :

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_YzWLbmp/682e040debc4ae4b12bdb50d14663047" src="//codepen.io/robinrendle/embed/YzWLbmp/682e040debc4ae4b12bdb50d14663047?height=300&amp;theme-id=light&amp;slug-hash=YzWLbmp/682e040debc4ae4b12bdb50d14663047&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/YzWLbmp/682e040debc4ae4b12bdb50d14663047">
  flex-basis example 1</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Vous avez remarqué que tous les éléments ont la largeur de leur contenu par défaut&nbsp;? C'est parce qu'`auto` dit que la taille idéale de notre élément est définie par son contenu. Pour que tous les éléments occupent tout l'espace du parent, nous pouvons régler les éléments enfants sur `width : 100%`, _ou_ nous pouvons régler `flex-basis` sur 100%, _ou_ nous pouvons régler `flex-grow` sur 1.

Est-ce que ça fait sens pour vous ? C'est bizarre, hein ! En fait, oui, lorsqu'on y pense. Chacune de ces valeurs abrégées a un impact sur les autres et c'est pourquoi il est recommandé d'écrire ce raccourci en premier lieu plutôt que de définir ces valeurs indépendamment les unes des autres.

Bon, passons à autre chose. Lorsque nous écrivons quelque chose comme ceci...

```css
.child-three {
  flex: 0 1 1000px;
}
```

...ce que nous disons ici au navigateur, c'est de régler `flex-basis` sur 1000px ou "s'il vous plaît, essayez d'occuper 1000px d'espace". Si ce n'est pas possible, l'élément occupera cet espace proportionnellement aux autres éléments.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13" src="//codepen.io/robinrendle/embed/qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13?height=300&amp;theme-id=light&amp;slug-hash=qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/qBNYzja/efd6a0311719f8458fcb8f3e99bf1f13">
  flex-basis example 2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Vous remarquerez peut-être que sur les petits écrans, ce troisième élément n'est pas réellement de 1000px&nbsp;! C'est parce qu'il s'agit en fait d'une _suggestion_. Nous avons toujours l'option `flex-shrink` appliquée, qui indique à l'élément de se réduire à la même taille que les autres éléments.

De même, l'ajout de contenu aux autres enfants aura toujours un impact ici&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_OJXwGja/464505f57050c12f294a6269583dd663" src="//codepen.io/robinrendle/embed/OJXwGja/464505f57050c12f294a6269583dd663?height=300&amp;theme-id=light&amp;slug-hash=OJXwGja/464505f57050c12f294a6269583dd663&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/OJXwGja/464505f57050c12f294a6269583dd663">
  flex-basis example 2</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Maintenant, si nous voulions empêcher cet élément de rétrécir, nous pourrions écrire quelque chose comme ceci&nbsp;:

```css
.child-three {
  flex: 0 0 1000px;
}
```

Rappelez-vous, `flex-shrink` est la deuxième valeur ici et en la réglant à 0, nous disons, "Ne rétrécis jamais, grand idiot." Et ce n'est pas le cas. L'élément se détachera même de l'élément parent parce qu'il ne sera jamais plus petit que 1000px de large&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595" src="//codepen.io/robinrendle/embed/BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595?height=300&amp;theme-id=light&amp;slug-hash=BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/BazxgwP/1a99b3fe9761e6581e3cf9a0e5e02595">
  flex-basis example 3</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

Maintenant, tout cela change si nous définissons `flex-wrap` sur l'élément parent :

```css
.parent {
  display: flex;
  flex-wrap: wrap;
}

.child-three {
  flex: 0 0 1000px;
}
```

Nous verrons quelque chose comme ça&nbsp;:

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_NWrMZwE/587a4f6710efcb8f0fb403791834df33" src="//codepen.io/robinrendle/embed/NWrMZwE/587a4f6710efcb8f0fb403791834df33?height=300&amp;theme-id=light&amp;slug-hash=NWrMZwE/587a4f6710efcb8f0fb403791834df33&amp;user=robinrendle&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/robinrendle/pen/NWrMZwE/587a4f6710efcb8f0fb403791834df33">
  flex-basis example 4</a> de robinrendle dans <a href="https://codepen.io">CodePen</a></span>
</div>

En effet, par défaut, les éléments flexibles essaieront de tenir sur une seule ligne, mais `flex-wrap : wrap` l'ignorera complètement. Maintenant, si ces éléments flex ne peuvent pas tenir dans le même espace, ils se sépareront sur une nouvelle ligne.

Quoi qu'il en soit, il ne s'agit là que de quelques-unes des façons dont les propriétés `flex` s'entrechoquent et de la raison pour laquelle il est si précieux de comprendre comment ces propriétés fonctionnent sous le capot. Chacune de ces propriétés peut affecter l'autre, et si vous ne comprenez pas le fonctionnement d'une propriété, alors d'une certaine façon vous ne comprenez pas du tout comment tout cela fonctionne —&nbsp;ce qui m'a certainement déconcerté avant que je ne commence à creuser ce sujet&nbsp;!

Mais pour résumer :

👉🏿 Essayez d'utiliser le raccourci flex  
👉🏿 Souvenez-vous de la taille maximale, minimale et idéale lorsque vous le faites  
👉🏿 N'oubliez pas que le contenu d'un élément peut également avoir un impact sur la façon dont ces valeurs fonctionnent ensemble.


Comprendre flex-grow, flex-shrink et flex-basis

CSS Flexbox et la dimension des boîtes

CSS Flexbox et l'alignement, guide complet

CSS Grid Layout, guide complet


La propriété `flex-grow` est une sous-propriété du module Flexible Box Layout.

Elle définit la capacité d'un élément flex à croître si nécessaire. Elle accepte une valeur sans unité qui sert de proportion. Elle dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'élément doit occuper.

```css
.element {
  flex-grow: 2;
}
```

Par exemple, si tous les éléments ont la valeur `flex-grow` définie sur 1, chaque enfant aura une taille égale à l'intérieur du conteneur. Si vous donnez à l'un des enfants une valeur de 2, cet enfant occupera deux fois plus d'espace que les autres.

## Syntaxe

```css
flex-grow: <number>;
```

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_krMwzK/9a9ad8fb040f5efaf4e749b49cae7281" src="//codepen.io/KittyGiraudel/embed/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281?height=300&amp;theme-id=light&amp;slug-hash=krMwzK/9a9ad8fb040f5efaf4e749b49cae7281&amp;user=KittyGiraudel&amp;default-tab=result" scrolling="no" frameborder="0" height="300" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/KittyGiraudel/pen/krMwzK/9a9ad8fb040f5efaf4e749b49cae7281">
  Flex-grow: demo</a> de Kitty Giraudel dans <a href="https://codepen.io">CodePen</a></span>
</div>

Tous les éléments ont une valeur `flex-grow` de 1, sauf le 3e qui a une valeur `flex-grow` de 2. Cela signifie que lorsque l'espace disponible est distribué, le 3e élément flex aura deux fois plus d'espace que les autres.


flex-grow

Flexbox, guide complet

## Plongée profonde dans CSS Grid

Vous vous rappelez la réponse de <a href="/auteurs/rachel-andrew">Rachel Andrew</a> à la question "utiliser CSS Grid ou Flexbox"&nbsp;? Sinon vous pouvez [regarder la vidéo](https://www.youtube.com/watch?v=MXEzJ-IncX0&feature=youtu.be&t=1274) (en anglais).

<blockquote><p>Flexbox est fait pour les layouts unidimensionnels, CSS Grid est fait pour les layouts en 2 dimensions</p>
<p><cite><a href="/auteurs/rachel-andrew">Rachel Andrew</a></cite></p></blockquote>

Je suis sûre que beaucoup l'ont réalisé avant moi, mais avant ma relation torride d'un mois avec CSS Grid je ne m'étais pas rendue compte à quel point Flexbox et Grid sont faits pour s'entendre. C'était quelque chose du genre oeufs et bacon, pomme et cannelle, beurre de cacahuète et confiture —&nbsp;ah ça y est, j'ai faim tout d'un coup.

Vous avez peut-être vu que j'ai apporté une contribution au [CSS Reference de Codrops](https://tympanus.net/codrops/css_reference/). Sérieux, c'est une des meilleures choses qui me soit arrivées en 2016. Une des entrées qui manquaient encore était CSS Grid. Avant de m'y mettre, j'avais juste bricolé un peu avec Grid en construisant un prototype pour [Penang Hokkien](http://penang-hokkien.gitlab.io/) utilisant Grid, histoire de voir si le mode vertical fonctionnerait mieux qu'avec Flexbox.

Et puis je me suis attelée au boulot et j'ai écrit [l'article](https://tympanus.net/codrops/css_reference/grid/).

3 semaines plus tard, j'avais l'impression d'avoir fusionné avec [Metal Cactuar](http://exvius.gamepedia.com/Metal_Cactuar) puissance maximum (désolé, _Final Fantasy_ fait partie de ma vie), autrement dit j'étais passé au niveau supérieur.

J'ai passé beaucoup de temps à éplucher la spécification, la lecture des [articles](https://blogs.igalia.com/mrego/) de [Manuel Rego Casasnovas](https://twitter.com/regocas) sur CSS Grid m'a beaucoup aidé ainsi que l'[antisèche de Rachel Andrew](https://rachelandrew.co.uk/css/cheatsheets/box-alignment) à un moment de grande confusion.

Un conseil : quand vous essayez d'apprendre une nouvelle propriété CSS, ayez toujours sous la main un template vide avec lequel vous pourrez expérimenter. Ça m'a vraiment été utile avec une propriété aussi nouvelle que Grid. Je sais, il y a aussi [Codepen](https://codepen.io/) et tout, mais rien ne vaut un template vierge pour une expérimentation libre de toute distraction.

## Exemples et démos

Pour analyser toutes les propriétés, j'ai commencé à construire des grilles très basiques, juste pour voir le fonctionnement des valeurs de propriétés. Si vous avez regardé la syntaxe de `grid-template-rows` dans la spécification, vous savez que ce n'était pas une tâche triviale. Grid lui-même n'est compliqué à apprendre. Mais comme il a été conçu pour être flexible et puissant, il vous faudra un peu de temps pour rentrer dans son fonctionnement.

Quelques-unes des grilles basiques se sont transformées en démos. Certaines trouvaient leur inspiration dans des conversations avec des membres du [CSS Layout Club](https://www.meetup.com/fr-FR/CSS-Layout-Club/). J'ai aussi glané quelques idées dans le cours de Coursera [Ideas from the History of Graphic Design](https://www.coursera.org/learn/graphic-design-history), il y a plein de belles choses (la semaine dernière était consacrée au [Bauhaus](https://fr.wikipedia.org/wiki/Bauhaus)).

Je suis tombée sur cette page de [Malerei, Fotografie, Film](http://bibliothequekandinsky.centrepompidou.fr/imagesbk/RLPF727/M5050_X0031_LIV_RLPF0727.pdf) par [László Moholy-Nagy](https://fr.wikipedia.org/wiki/L%C3%A1szl%C3%B3_Moholy-Nagy), dont la mise en page utilisait une grille originale et l'idée m'est venue qu'on pouvait peut-être la réaliser en CSS...



<figure role="group"><img src="/images/126-640.jpeg" alt="grille texte et images, texte horizontal et vertical, symboles, fortes séparations"/><figcaption>Page 126 de Malerei, Fotografie, Film</figcaption></figure>

## Le Bauhaus dans mon navigateur

Voici comment j'ai procédé. J'ai dessiné les lignes de la grille par-dessus l'image en utilisant Sketch, de façon à me faire une idée du nombre de colonnes nécessaires. Dans cet exemple, c'était 1 large colonne suivie de 5 colonnes plus étroites de largeur égale, et j'ai laissé ensuite le navigateur se débrouiller avec la hauteur des rangées.

```
.grid {
  display: grid;
  grid-template-columns: 30% 9% 9% 9% 9% 9%;
  justify-content: center; /* pour justifier la grille au centre du container */
}
```

Ensuite, il y a eu tout le code de placement avec les propriétés `grid-row` et `grid-column`. Mais si vous regardez à nouveau l'image originale, vous verrez que le contenu de chaque cellule a son propre alignement. Par exemple, celui de la première cellule est à droite, celui de la deuxième est en bas à gauche, etc.

👉🏿&nbsp;_NdT&nbsp;: pour consulter les définitions et utilisation des propriétés, voyez l'article [CSS Grid Layout, guide complet](/articles/css-grid-layout-guide-complet))_.

Mon premier réflexe, vu que j'avais cet alignement de boîtes, a été d'appliquer `justify-self` et `align-self` là où c'était nécessaire, pour ajuster les positions de contenu à l'intérieur de chaque cellule. Bien tenté, mais à côté... Le problème est que ces deux propriétés affectent la quantité d'espace occupée par la cellule.

Le design du Bauhaus présente des bordures noires très frappantes autour de chaque cellule. La propriété `border` s'applique à l'item de grille. Toute propriété d'alignement de grille autre que `stretch` adaptera la dimension de l'item grid à son contenu. Toute bordure appliquée à un item grid s'adaptera au contenu de l'item, par conséquent je ne pouvais pas procéder ainsi.



<figure><img src="/images/fit.svg" alt="les bordures sont sur les items, mais les dimensions de l'item ne sont pas celles de la cellule"/><figcaption>Ce ne sont pas les bordures souhaitées !</figcaption></figure>

## Flexbox à la rescousse

Par défaut, tous les items grid se comportent comme si leur alignement avait été réglé sur `stretch` sur chaque axe. J'ai donc laissé tomber, pour permettre à la grille de ressembler à une grille, et à la place, j'ai appliqué `display: flex` à l'item grid, ce qui m'a permis d'utiliser les propriétés d'alignement flex sur le container flex, pour positionner le contenu de mon item grid.



<figure><img src="/images/flex.svg" alt="les bordures correspondent aux lignes horizontales et verticales de la grille, et ne recouvrent pas les items lorsque ceux-ci s'étendent sur plusieurs cellules"/><figcaption>Ah voilà, cette fois-ci c'est bon.</figcaption></figure>

```
.grid__item:nth-child(5) {
  grid-row: 3 / 5;
  border-right: 1em solid;
  padding: 1em;

  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
}
```

Le code ressemble à ce qui précède, mais ce que je veux souligner avant tout c'est qu'il s'agit d'une formidable technique pour la mise en page. Grid pour l'organisation générale, et Flexbox pour les ajustements spécifiques. Voici ce que ça donne [sur Codepen](http://codepen.io/huijing/pen/PpqomV) si vous voulez voir le résultat final.

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_PpqomV" src="//codepen.io/huijing/embed/PpqomV?height=600&amp;theme-id=light&amp;slug-hash=PpqomV&amp;user=huijing&amp;default-tab=result" scrolling="no" frameborder="0" height="600" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="http://codepen.io/huijing/pen/PpqomV/">
  Malerei, Fotografie, Film (pg. 126)</a> de Chen Hui Jing dans <a href="https://codepen.io">CodePen</a></span>
</div>

## Bonus : réaliser des formes en CSS

À part les deux photos, tout ce qui est sur la page est réalisé en CSS, autrement dit la flèche et la roue dentée sont des `div` auxquelles j'ai appliqué des styles. J'aime faire des formes en CSS, avec une `div` unique si possible. Il suffit pour cela de quelques propriétés pratiques, `box-shadow`, `border` et [les pseudo-éléments](/articles/les-pseudo-elements-css-before-et-after/).

### La flèche

Les flèches sont assez simples à réaliser. Il vous faut juste un pseudo-élément pour la pointe. Le corps de la flèche est une simple `div` à laquelle on donne une `position: relative` de façon à positionner la pointe par rapport au corps. La pointe est un triangle, qu'on peut réaliser grâce à [l'astuce de la bordure](http://stackoverflow.com/questions/27492191/how-to-make-a-fancy-arrow-using-css).

```
.arrow {
  width: 0.5em;
  height: 65%;
  background-color: #000;
  position: relative;

  &::after {
    display: block;
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -1em;
    border-style: solid;
    border-width: 1em 1em 0 1em;
    border-color: #000 transparent transparent transparent;
  }
}
```

### La roue dentée

Là, c'est un peu plus compliqué. Le corps de la roue est un cercle, réalisé via `border-radius: 50%`, mais les dents vont nous demander un peu de travail. Je n'ai pas pu le faire avec une seule `div` cette fois-ci (mais si quelqu'un y arrive, contactez-moi). J'ai ajouté une `div` interne. La bonne nouvelle c'est que toutes les dents ont une forme identique, donc l'astuce `box-shadow` peut être utilisée ici.

```
.gear {
  height: 5em;
  width: 5em;
  background-color: #000;
  border-radius: 50%;
  position: relative;

  &::before,
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
  }
}
```

Le corps de la roue et les 4 dents directionnées comme les aiguilles d'une boussole ont été réalisées avec une seule `div` et 2 pseudo-éléments. Pour les 4 autres dents, j'ai utilisé la `div` intérieure avec des pseudo-éléments et fait tourner les `box-shadow`. Je dois toujours résoudre le problème de `transform-origin` car je trouve qu'il y a encore une certaine asymétrie.

```
.inner-gear {
  height: 2em;
  width: 2em;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #e1e1d5;

  &::before,
  &::after {
    position: absolute;
    display: block;
    content: '';
  }

  &::before {
    height: 3em;
    width: 1em;
    box-shadow: 0em -3em 0em 0em #000, 0em 3em 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (75% 75%);
  }

  &::after {
    height: 1em;
    width: 3em;
    box-shadow: 3em 0 0em 0em #000, -3em 0 0 0em #000;
    transform: rotate(45deg);
    transform-origin: (25% 75%);
  }
}
```

### Conclusion

CSS Grid est vraiment génial, et nous sommes nombreux à le penser. [Jen Simmons](http://jensimmons.com/) a compilé une liste de bonnes ressources Grid, faites un tour sur [Learn CSS Grid](http://jensimmons.com/post/feb-27-2017/learn-css-grid) et essayez de construire quelque chose avec Grid. Vous ne le regretterez pas&nbsp;!

Grid et Flexbox, le duo gagnant


Plus j’utilise [flexbox](/tags/flexbox/), plus revient la même règle&nbsp;: `justify-content: space-between`. Dans cet article, je vais vous montrer mon approche des questions de mise en page avec flexbox et l’utilité de `space-between` pour résoudre efficacement quelques difficultés épineuses.

<h2>space-between</h2>

`space-between` est une des valeurs possibles de la propriété [justify-content](https://developer.mozilla.org/fr/docs/Web/CSS/justify-content). Elle dispose tous les items flex de manière régulière le long de l’axe principal. L’espace résiduel éventuel est distribué de manière égale _entre_ les items. Un peu comme des items flottants à gauche et à droite, mais vous n’avez pas besoin de _clear_ et vous pouvez le faire horizontalement ou verticalement. C’est un pattern qu’on retrouve à peu près tout le temps.

Ce qui est cool avec `space-between` c’est que les items que vous disposez conservent leur dimension intrinsèque. Cela vous permet d’avoir un balisage vraiment efficace, qui ne requiert pas d’utiliser des éléments contenants —&nbsp;en fait, la plupart du temps vous pouvez simplement positionner vos items avec flex et c’est bon.

Comme pour tout, à mon avis rien ne vaut une bonne démo. Imaginons que nous avons un super projet d’appli de tournoi Super Smash Bros et un designer nous remet ceci&nbsp;:

<figure><img src="/images/super-smash-bros-1-compressor.png" alt="tableau de scores"/></figure>

Voici comment je m’y prendrais pour construire la section header —&nbsp;la partie avec les images des combattants, les icônes, leurs noms, le score, etc.&nbsp;— avec flexbox et `space-between`.

<h3>Figure 1 - Décomposer le problème de layout</h3>

<figure><img src="/images/super-smash-bros-2-compressor.jpeg" alt="décomposition de l'image en ses éléments, une section en haut, une section en bas"/></figure>

La première chose que je fais lorsque je m’attaque à un problème de mise en page, c’est de décomposer tous ses éléments. On a l’image de background, que nous pouvons traiter avec un positionnement absolu et sortir du flow.

Il nous reste à positionner le contenu supérieur par-dessus l’image. Nous avons deux régions&nbsp;:

1. une section en haut avec quelques boutons icônes, l’un à gauche, l’autre à droite.
2. une section en bas comportant le nom du combattant , le score final, des icônes, etc.

Pour ces deux sections, l’axe principal est vertical. Avec `display: flex` et `flex-direction: column` puis `justify-content: space-between`, on fixe les items flex en haut et en bas du header.

Pour illustrer la façon dont ça marche, j’ai indiqué une hauteur donnée pour les sections, mais normalement on peut simplement laisser la dimension du contenu situé à l’intérieur d’un item flex déterminer sa taille. Plus tard dans ces exemples je retirerai la hauteur fixe. Voici une démo.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/EjVjJV/">
  Figure 1</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

_Note : Nous devons laisser le background en dehors du contexte flex, car il y a un [bug dans Firefox](https://github.com/philipwalton/flexbugs/issues/18) qui fait que `space-between` applique de l’espace à des éléments positionnés absolument. Pour éviter ce bug, j’ai enveloppé le contenu dans un élément positionné absolument —&nbsp;.header-content&nbsp;— et indiqué le contexte flex à l’intérieur_

<h3>Figure 2 - Flexibiliser et grouper les items</h3>

<figure><img src="/images/super-smash-bros-3-compressor.jpeg" alt="icônes de navigation, partage, menu"/></figure>

Maintenant, attaquons-nous à la section du haut. Cette fois-ci, les items sont fixés sur les côtés du header, mais selon un axe horizontal. Indiquons `display: flex` dans cette section pour créer notre contexte flex. Nous n’avons pas besoin de définir explicitement la `flex-direction` parce que la valeur est `row`, ou horizontal, par défaut. On utilise à nouveau `justify-content: space-between` pour fixer les items sur les côtés. Les deux icônes sur la droite sont enveloppées dans un élément pour les fixer ensemble sur le côté droit. C’est une façon commode et efficace de grouper des items flex. Dans l’enveloppe de droite, nous pouvons utiliser une autre astuce sympa de flexbox, `display: inline-flex`. Tout se passe comme si on mettait `display: inline-block` sur chacun des items pour leur permettre d’être les uns à côté des autres, mais contrairement à `inline-block`, nous n’avons pas besoin de le définir sur chaque item et il ne nous reste pas d’espace à éliminer entre les items.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/YXyXbQ/">
  Figure 2</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 3 - L’efficacité de space-between</h3>

<figure><img src="/images/super-smash-bros-4-compressor.jpeg" alt="partie du bas"/></figure>

Et maintenant, la partie du bas. Ce sont juste deux boîtes superposées. Comme avec les enveloppes de la partie du haut, nous n’avons rien de particulier à faire avec ces items. À nouveau, je donnerai une hauteur déterminée pour la démonstration, mais on pourrait tout aussi bien laisser cette section prendre les dimensions de son contenu.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/doYoxW/">
  Figure 3</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 4</h3>

<figure><img src="/images/super-smash-bros-5-compressor.jpeg" alt=""/></figure>

La partie du haut de la section inférieure est semblable au header. Les items sont fixés de chaque côté de l’axe horizontal. Est-ce que vous trouvez qu’on se répète&nbsp;? J’espère bien que oui&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/bdVVbm/">
  Figure 4</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 5</h3>

<figure><img src="/images/super-smash-bros-6-compressor.jpeg" alt=""/></figure>

La partie du bas de la section inférieure comporte des items fixés de chaque côté et un item au milieu. Là encore, `space-between` est l’outil qu’il nous faut : un troisième item à l’intérieur d’un contexte flex est positionné au milieu. Trop fort&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/waKKBY/">
  Figure 5</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

<h3>Figure 6 - Tous ensemble maintenant !</h3>
Et voici tous les éléments réunis et stylés.

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/GJppMX/">
  le résultat final</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>

Et voici les mêmes, avec l’image de background, un SVG que j’ai créé pour avoir des couleurs qui se mélangent dynamiquement. Restez branché pour en savoir plus à ce sujet&nbsp;!

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="http://codepen.io/noahblon/pen/MwabGx/">
  le résultat vraiment final</a> de Noah Blon dans <a href="https://codepen.io">CodePen</a></span>
</div>


Guide de Flexbox : space-between, l'oublié


La propriété `justify-content` est une sous-propriété du module Flexible Box Layout.

Elle définit l'alignement le long de l'axe principal. Elle permet de répartir l'espace libre restant lorsque tous les éléments flexibles d'une ligne sont inflexibles, ou sont flexibles mais ont atteint leur taille maximale. Elle exerce également un certain contrôle sur l'alignement des éléments lorsqu'ils débordent de la ligne.

La propriété `justify-content` accepte six valeurs différentes :

- `flex-start` (_valeur par défaut_) : les éléments sont alignés sur la ligne de départ.
- `flex-end` : les éléments sont regroupés vers la ligne de fin
- `center` : les éléments sont centrés le long de la ligne
- `space-between` : les éléments sont répartis uniformément sur la ligne ; le premier élément est sur la ligne de début, le dernier élément sur la ligne de fin.
- `space-around` : les articles sont répartis uniformément sur la ligne avec un espace égal autour d'eux.
- `space-evenly` : les éléments sont répartis de manière à ce que l'espacement entre deux sujets d'alignement adjacents, avant le premier sujet d'alignement et après le dernier sujet d'alignement soit le même.

## Syntaxe

```css
justify-content: flex-start | flex-end | center | space-between |
  space-around | space-evenly .flex-item {
  justify-content: center;
}
```

## Démo

La démo suivante montre comment les éléments flex se comportent en fonction de la valeur `justify-content`&nbsp;:

- La liste rouge est définie sur flex-start
- La liste jaune est réglée sur flex-end
- La liste bleue est réglée sur center
- La liste verte est réglée sur space-between
- La liste rose est réglée sur space-around
- Le vert clair est réglé sur space-evenly

<figure class="break-out">
	<div><iframe loading="lazy" decoding="async" id="cp_embed_zzJMGJ" src="//codepen.io/team/css-tricks/embed/zzJMGJ?height=600&amp;theme-id=light&amp;slug-hash=zzJMGJ&amp;user=team/css-tricks&amp;default-tab=result" scrolling="no" frameborder="0" height="600" allowtransparency="true" allowfullscreen="true" name="CodePen Embed" title="CodePen Embed" class="cp_embed_iframe " style="width: 100%; overflow: hidden;"></iframe></div>
</figure>

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir <a href="https://codepen.io/team/css-tricks/pen/zzJMGJ">
  Flexbox & justify-content</a> de team/css-tricks dans <a href="https://codepen.io">CodePen</a></span>
</div>


justify-content

Que se passe-t-il quand on crée un Flexbox flex container?


Un sticky footer ("pied de page collant" ou "bas de page adhérant") est un pied de page qui reste "collé" au bas de la fenêtre du navigateur —&nbsp;mais pas toujours&nbsp;: s'il y a assez de contenu pour remplir la fenêtre, le footer suit le contenu et n'apparaît pas, si au contraire il n'y a pas assez de contenu, le footer sera collé en bas de page.

<figure><img src="/images/sticky_footer-compressor.jpeg" alt=""/></figure>

Voici 5 façons possibles de créer un sticky footer, des plus anciennes aux plus récentes&nbsp;:

<h2>Marges négatives sur les wrappers</h2>

Autrefois on utilisait un élément qui enveloppait tout le contenu à l'exception du pied de page. Cet élément "wrapper" avait une marge négative égale à la hauteur du pied de page.

```html
<body>
  <div class="wrapper">
    content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Égal à la hauteur du footer */
  /* Tient compte aussi d'une possible margin-bottom du dernier enfant */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/VjZmGj">
  Sticky Footer with Negative Margin 1</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Pour y parvenir on a utilisé un élément supplémentaire (le `.push`) pour s'assurer que la marge négative ne tire pas le footer vers le haut ce qui aurait recouvert une partie du contenu.

<h2>Marge supérieure négative sur le footer</h2>

[Cette autre technique](https://www.cssstickyfooter.com/) ne faisait pas appel à un élément _push_ mais à un élément enveloppant supplémentaire dans lequel on appliquait un padding inférieur correspondant. Là encore, pour éviter que la marge négative ne fasse passer le footer par-dessus un contenu.

```html
<body>
  <div class="content">
    <div class="content-inside">content</div>
  </div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/aZoBMb">
  Sticky Footer with Negative Margin 2</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Le point commun à ces deux techniques est qu'elles requièrent toutes deux des éléments HTML supplémentaires qui n'ont d'autre utilité que positionnelle.

<h2>Hauteur du wrapper calculée</h2>

[Une façon](https://priteshgupta.com/2016/05/sticky-css-footer/) d'éviter le recours à des éléments HTML inutiles consiste à ajuster la hauteur de l'élément enveloppant à l'aide de CSS `calc()`. Il n'y a plus de tuilage, ce sont simplement deux éléments empilés l'un sur l'autre ayant une hauteur totale de 100%.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/jqRXBz">
  Sticky Footer with calc();</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

Remarquez les 70px dans la formule de `calc()`, comparés aux 50px de la taille fixe du footer. On suppose en fait que le dernier item du contenu aura une marge inférieure de 20px. C'est donc la somme de cette marge et de la hauteur du footer qu'il convient de soustraire de la hauteur du viewport. Et remarquez aussi que nous utilisons les unités viewport ici (`vh`) afin d'éviter d'avoir à régler la hauteur de `body` à 100% avant de pouvoir régler celle du wrapper à 100%.

<h2>Il y a Flexbox</h2>

Le grand problème des trois techniques précédentes est qu'elles requièrent un footer de hauteur fixe. Dans le design web, les hauteurs fixes sont en général un mauvais choix, le contenu peut changer, les choses sont flexibles et donc les hauteurs fixes devraient être évitées. La solution [Flexbox](/tags/flexbox) non seulement ne nécessite pas d'élément supplémentaire mais permet d'avoir une hauteur de footer variable.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
html,
body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/RRbKrL">
  Sticky Footer with Flexbox</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

On pourrait même ajouter un header ou d'autres éléments. Le "truc" avec Flexbox c'est&nbsp;:

- soit `flex: 1` sur l'élément enfant qu'on veut agrandir pour qu'il remplisse l'espace (ici, le contenu),
- soit `margin-top: auto` pour pousser l'élément enfant aussi loin que possible de son voisin (ou toute autre marge selon la direction souhaitée).

N'oubliez pas que nous avons un [guide complet sur Flexbox](/articles/flexbox-guide-complet/) ici même pour plus d'infos.

<h2>Il y a CSS Grid</h2>

[CSS Grid Layout](/tags/cssgrid) est plus récent que Flexbox mais [largement supporté aujourd'hui](https://caniuse.com/#feat=css-grid). On peut l'utiliser facilement pour créer un sticky footer.

```html
<body>
  <div class="content">content</div>
  <footer class="footer"></footer>
</body>
```

et

```css
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}
```

<div class="pen">
<img src="/images/codepen.png" alt="" class="codepen-icon"><span>voir le <em>Pen</em><a href="https://codepen.io/chriscoyier/pen/YWKNrE">
  Sticky Footer with Grid</a> de Chris Coyier dans <a href="https://codepen.io">CodePen</a></span>
</div>

N'oubliez pas que nous avons un [guide complet sur CSS Grid](/articles/css-grid-layout-guide-complet) ici même pour plus d'infos.


La Cascade

flexbox

Outils, jeux, antisèches Flexbox en français

Ressources complémentaires en anglais