Cours 10 - Positionnement CSS 2

Objectifs

Déroulement

  1. Introduction
  2. Présentation des propriétés Flexbox
  3. Démonstration de l'utilisation de Flexbox
  4. Exercice 10
  5. Conclusion
    1. Devoir 10

Utilisation de Flexbox

Je recommande l'utilisation de Flexbox pour diviser les contenus visuels, textuels et médiatiques de notre site (balises divs)

Propriétés sur l'élément parent

display: flex | inline-flex; `flex` : Cette valeur génère un container flex, de niveau block, à l'intérieur de l'élément.
`inline-flex` : Cette valeur génère un container flex, de niveau inline, à l'intérieur de l'élément.
flex-direction: row | row-reverse | ... `row` (valeur par défaut): de gauche à droite si la lecture se fait dans ce sens, de droite à gauche dans le cas inverse
`row-reverse` : inverse le sens
`column` : comme `row` mais du haut vers le bas
`column-reverse` : comme `row-reverse`, mais du bas vers le haut
flex-wrap: nowrap | wrap | ... `nowrap` : (valeur par défaut) sur une seule ligne, de gauche à droite dans un système `ltr`, sinon l'inverse. La ligne peut déborder de son contenant.
`wrap` : multiligne, de gauche à droite dans un système `ltr`, sinon l'inverse. Pas de débordement, on passe à la ligne.
`wrap-reverse` : multiligne, de droite à gauche dans un système `ltr`, sinon l'inverse.
justify-content: flex-start | ... `flex-start` (par défaut) : les items sont regroupés en début de ligne
`flex-end` : les items sont regroupés en fin de ligne
`center` : les items sont centrés le long de la ligne
`space-between` : les items sont répartis sur la ligne; le premier est collé du côté start, le dernier du côté end.
`space-around` : les items sont répartis sur la ligne avec un espacement égal autour de chacun.
align-items: flex-start | flex-end | ... `flex-start` : l'item est placé au début de la ligne cross-start.
`flex-end` : la marge "cross-end" de l'item est placée sur la ligne cross-end
`center` : les items sont centrés sur l'axe cross
`baseline` : les items sont alignés sur leur ligne de base
`stretch` (par défaut) : les items sont étirés jusqu'à remplir le container (tout en respectant min-width/max-width)
align-content: flex-start | flex-end | ... `flex-start` : lignes regroupées au début du container
`flex-end` : lignes regroupées à la fin du container
`center` : lignes regroupées au centre du container
`space-between` : les lignes sont réparties, la première est collée du côté start, la dernière du côté end.
`space-around` : les lignes sont réparties avec un espacement égal autour de chacune.
`stretch` (par défaut) : les lignes s'étirent pour remplir tout l'espace.

Propriétés sur les éléments enfants

flex-grow: nombre entier définit la possibilité pour un item de grandir, si nécessaire.
flex-shrink: nombre entier définit la possibilité pour un item flex de rétrécir si nécessaire.
flex-basis: longueur | auto définit la taille par défaut d'un élément avant que l'espace restant soit réparti.
flex: none | [ 'flex-grow' 'flex-shrink'? || 'flex-basis' ] raccourci de `flex-grow` , `flex-shrink` et `flex-basis` (0 1 auto)
order: nombre entier contrôle l'ordre dans lequel ils apparaissent dans le container.
align-self: auto | flex-start | ... permet à des items flex de passer outre aux alignements par défaut

Flexbox 1 - Base

Exemple

See the Pen Cours 09 - Flexbox 1 - Base by Jimmy Gilbert (@coachtechno) on CodePen.

TODO

Flexbox 2 - Complexe

Exemple

See the Pen Cours 09 - Flexbox 2 - Complexe by Jimmy Gilbert (@coachtechno) on CodePen.

TODO

Flexbox 3 - Grille

Exemple

See the Pen Cours 09 - Flexbox 3 - Grille by Jimmy Gilbert (@coachtechno) on CodePen.

TODO

Flexbox 4 - Minisite

Exemple

See the Pen Cours 09 - Flexbox 4 - Minisite by Jimmy Gilbert (@coachtechno) on CodePen.

TODO

Vidéo - Démonstration d'utilisation de Flexbox