Flexbox & Grid

Remi Forax

Histoire des Layouts

Différents modèles de placement (layout)

pre-CSS: table (avant 1996)
CSS1: float (1996+)
CSS1/CSS2: position (1996/2011+)
CSS3: Flexbox et Grid (2015)

Flexbox

CSS Flexbox ?

“CSS Flexible Box Layout, commonly known as Flexbox, is a CSS 3 web layout model. The flex layout allows responsive elements within a container to be automatically arranged depending upon screen size (or device).”

source: Wikipedia.org - Flexbox

CSS Flexbox ?

“CSS Flexible Box Layout, ou communément FlexBox, est un modèle de layout CSS 3 pour le web. Ce layout flexible permet d'arranger automatiquement les éléments à l'intérieur d'un conteneur de façon responsive en fonction de la taille de l'écran (ou de l'appareil).”

sources : Wikipedia.org - Flexbox

Historique des versions

CC3 Flexbox	2009-2012
Support dans Firefox, Chrome, Safari	2014, 2015
Flexbox 1.0	2016+
W3c FlexBox	2018

Réponds à deux questions

Comment aligner verticalement des boites ?
Comment placer des boites de façon responsive ?

Exemple

Modèle d'affichage display: flex

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container { display: flex; /* inline-flex */ } .item { background-color: pink; margin: 15px; width: 100px; height: 40px; }

Propriétés du conteneur

Direction

flex-direction: row | row-reverse | column | column-reverse

.container { display: flex; flex-direction: row-reverse; } .item { background-color: pink; margin: 15px; width: 100px; height: 40px; }

Alignement Horizontal

justify-content: start | end | center | space-between | space-evenly | space-around

.container { display: flex; flex-direction: row; justify-content: center; } .item { background-color: pink; margin: 15px; width: 100px; height: 40px; }

Alignement Vertical

En fait, alignement sur l'axe opposé à flex-direction

align-items: start | end | center | baseline | stretch

.container { display: flex; flex-direction: row; justify-content: center; align-items: center; } .item1 { background-color: pink; margin: 15px; width: 100px; height: 20px; } .item2 { background-color: pink; margin: 15px; width: 100px; height: 40px; } .item3 { background-color: pink; margin: 15px; width: 100px; height: 60px; }

Multi-lignes

Si il n'y a pas assez de place sur une ligne ...

flex-wrap: nowrap | wrap | wrap-reverse
align-content: start | end | center | space-between | space-around | space-evenly | stretch

.container { display: flex; flex-direction: row; justify-content: center; align-items: center; flex-wrap: wrap; align-content: start; height: 200px; } .item { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Flex-flow

La propriété flex-flow permet de définir flex-direction et flex-wrap en une seule propriété

flex-flow: flex-direction flex-wrap

.container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; height: 200px; } .item { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Espacement ligne/colonne

gap indique un espacement minimal entre les boites

row-gap: 10px et column-gap: 20px
gap: 10px 20px /* row-gap column-gap */
gap: 10px /* 10px 10px */

.container { display: flex; flex-flow: row wrap; justify-content: center; align-items: center; align-content: flex-start; gap: 10px 30px; height: 150px; } .item { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Propriétés des éléments

Alignement vertical spécifique

Un élément peut indiquer qu'il a un alignement spécifique align-self au lieu d'utiliser align-items du conteneur

align-self: auto | flex-start | flex-end | center | baseline | stretch

.container { display: flex; flex-direction: row; align-items: center; height: 100px; } .item1 { align-self: flex-end; background-color: pink; margin: 15px; width: 100px; height: 20px; } .item2 { background-color: pink; margin: 15px; width: 100px; height: 20px; } .item3 { background-color: pink; margin: 15px; width: 100px; height: 20px; }

Taille d'un élément

flex-basis définie la taille

flex-basis: auto /* use width/height */
flex-basis: 100px
flex-basis: 20%

.container { display: flex; flex-direction: row; width: 100%; } .item1 { flex-basis: 20%; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item2 { flex-basis: 60%; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item3 { flex-basis: 20%; background-color: pink; margin: 10px; width: 100px; height: 40px; }

Agrandissement responsive

flex-grow indique qu'un élement participe à l'agrandissement
0= pas d'agrandissement, 1= agrandissement

.container { display: flex; flex-direction: row; width: 100%; } .item1 { flex-grow: 1; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item2 { background-color: pink; margin: 10px; width: 100px; height: 40px; } .item3 { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Agrandissement responsive

si plusieurs flex-grows, alors l'agrandissement est proportionnel aux valeurs

.container { display: flex; flex-direction: row; width: 100%; } .item1 { flex-grow: 2; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item2 { flex-grow: 1; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item3 { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Rétrécissement responsive

flex-shrink indique le facteur de rétrécissement
proportionnel comme flex-grow mais avec 1 comme valeur par défaut

.container { display: flex; flex-direction: row; width: 100%; } .item1 { flex-shrink: 2; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item2 { background-color: pink; margin: 10px; width: 100px; height: 40px; } .item3 { background-color: pink; margin: 10px; width: 100px; height: 40px; }

Attribut flex

flex indique les différents facteurs en une seule propriété flex: flex-grow flex-shrink flex-basis

.container { display: flex; flex-direction: row; width: 100%; } .item1 { flex: 0 2 auto; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item2 { flex: 1 1 auto; background-color: pink; margin: 10px; width: 100px; height: 40px; } .item3 { flex: 1 1 auto; background-color: pink; margin: 10px; width: 100px; height: 40px; }

En résumé

Flexbox permet d'avoir un layout adaptatif, mais on a que le choix entre wrap/nowrap, sinon il faut utiliser les media-query

Sur le conteneur, display: flexbox + flex-flow
Sur les élements, flex

.container { display: flex; flex-flow: column nowrap; } .side { flex: 1 1 auto; background-color: lightgrey; margin: 5px; } .main { display: flex; flex-flow: row wrap; flex: 2 1 auto background-color: lightgrey; margin: 5px; } .story { background-color: pink; flex: 1 1 auto; margin: 5px; padding: 5px; }

Grid

CSS Grid ?

“CSS grid layout or CSS grid creates complex responsive web design grid layouts more easily and consistently across browsers.”

source: Wikipedia.org - Grid layout

CSS Grid ?

“CSS grid Layout ou CSS grid crée des grilles de placement complexe et responsive plus simplement et de la même façon quel que soit le navigateur.”

sources : Wikipedia.org - Grid layout

Historique des versions

Création	2011
Support dans Firefox, Chrome, Safari	2017
W3c CSS Grid	2020

Exemple

Modèle d'affichage display: grid

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container { display: grid; /* inline-grid */ grid-template-columns: 50% 80px; grid-template-rows: auto auto; border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }

Propriétés du conteneur

Grid-template-[columns|rows]

Indique les tailles de chaque colonne et de chaque ligne

.container { display: grid; grid-template-columns: 40% 1fr 20%; grid-template-rows: auto 50px; border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }

Grid-template-* Unités

en pixels: 100px
en %: 20% (pourcentage su conteneur)
en fr: 2fr (espace libre/proportionnel)
min-content: (texte) taille du plus grand mot
max-content: (texte) taille de tous les mots

.container { display: grid; grid-template-columns: 1fr max-content 2fr; grid-template-rows: auto 50px; border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }

Grid-template-* repeat

La macro repeat(times, value) permet d'appliquer la même valeur à toute les colonnes (resp. lignes) d'une grille

.container { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, auto); border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }

Alignement Horizontal

justify-content: start | end | center

.container { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: auto; justify-content: center; border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }

Alignement Vertical

Alignement le long de l'axe des colonnes

align-items: start | end | center | baseline | stretch

.container { display: grid; grid-template-columns: repeat(3, 150px); grid-template-rows: auto; align-items: center; border: solid black; } .item1 { border: solid black; background-color: pink; margin: 5px; height: 20px; } .item2 { border: solid black; background-color: pink; margin: 5px; height: 40px; } .item3 { border: solid black; background-color: pink; margin: 5px; height: 60px; }

Espacement ligne/colonne

gap définie l'espacement entre les colonnes ou les lignes
marche comme avec flexbox

row-gap: espacement entre lignes
column-gap: espacement entre les colonnes
gap: row-gap column-gap

.container { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 10px 40px; border: solid black; } .item { border: solid black; background-color: pink; margin: 5px; }