Les balises HTML block
Les balises HTML inline
Les balises HTML inline-block
|
Applique box-sizing à tout les éléments et pseudo-elements |
Modèle de boîte par défaut :
width:300px;
height:200px;
margin:2rem;
padding:2rem;
border:3px solid orange;
margin:2rem;padding:2rem;width et heightLargeur totale de la boîte : 300px + 4rem (paddings) + 6px (borders)
Hauteur totale de la boîte : 200px + 4rem (paddings) + 6px (borders)
Modèle de boîte avec box-sizing :
width:300px;
height:200px;
margin:2rem;
padding:2rem;
border:3px solid orange;
box-sizing:border-box;margin:2rem;padding:2rem;width et heightLargeur totale de la boîte : 300px, paddings et borders inclus
Hauteur totale de la boîte : 200px, paddings et borders inclus
Flexbox fournit une façon efficace de disposer, aligner et distribuer l'espace entre les items d'un container, même lorsque leurs dimensions sont inconnues et/ou dynamiques.
Par défaut, les enfants (items) sont disposés dans le parent (container) le long d'un axe principal qui, par défaut, est horizontal. l'axe secondaire va donc par défaut de haut en bas
|
Transforme la <div class="card"> en container flexbox |
|
flex-direction:row; (par défaut) l'axe principal va de gauche à droiteflex-direction:column; change la direction de l'axe principal du haut vers le basflex-direction:row-reverse; change la direction de l'axe principal de droite à gaucheflex-direction:column-reverse; change la direction de l'axe principal du bas vers le haut
|
|
Détermine si le container ne fait qu'une seule ligne ou plusieursflex-wrap:nowrap; (par défaut) les items sont tous sur une seule ligneflex-wrap:wrap; quand les items arrivent en bout de ligne, ils passent à la ligne suivanteflex-wrap:wrap-reverse; même chose dans l'autre sens |
|
Raccourci des deux dernières instructions |
|
Aligne les enfants le long de l'axe principaljustify-content:flex-start; (par défaut) aligne au débutjustify-content:flex-end; aligne à la finjustify-content:center; aligne au centrejustify-content:space-between; distribue avec un espacement égal entre chacunjustify-content:space-around; distribue avec un espacement égal autour de chacun |
|
Aligne les enfants le long de l'axe secondairealign-items:flex-start; (par défaut) aligne au débutalign-items:flex-end; aligne à la finalign-items:center; aligne au centrealign-items:baseline; aligne sur leur ligne de basealign-items:stretch; étire jusqu'à remplir le container |
|
Déplace visuellement l'enfant en fonction de l'ordre du document initial. Dans cet exemple, -1 déplacera l'enfant avant tout les autres |
|
Raccourci de plusieurs propriétés flexbox qui, dans cet exemple, oblige un enfant à utiliser tout l'espace rendu disponible par l'alignement |
|
Permet à un item de passer outre la règle d'alignement dictées par le parent (align-items). Les valeurs à utiliser sont les mêmes que ce dernier. |
CSS Grid Layout est un système de structuration du document basé sur les grilles. Cette technique présente quelques analogies avec Flexbox mais lui est très complémentaire
Par défaut, les enfants (items) sont disposés dans le parent (container) sur une grille.
Cette grille est composée de :
|
Transforme la <section> en container grid |
|
Définit le nombre de colonnes et leur taille. Dans cet exemple, 5 colonnes de tailles différentes dont la centrale occupe automatiquement tout l'espace restant |
|
Définit le nombre de rangées et leur taille. Dans cet exemple, 3 lignes de tailles différentes |
|
Donne un nom à des zones de la grille. Dans cet exemple, une grille de 4 colonnes et 3 lignes est découpée en 4 zones "header", "main", "sidebar" et "footer" et une zone reste vide "." |
|
Définit un espace entre les colonnes et les lignes. Dans cet exemple : 15px entre les colonnes et 10px entre les lignes |
|
Distribue les colonnes dans la grille (voir flexbox plus haut) |
|
Aligne les lignes à la fin de la grille |
|
Centre les éléments contenus dans les cellules de la grille |
|
Aligne les éléments contenus à la fin des cellules de la grille |
|
Place un enfant à un endroit précis de la grille. Dans cet exemple : de la 3ème ligne à la 5ème ligne, donc les 3ème et 4ème colonnes, et de la 3ème à la 4ème ligne, donc la 3ème colonne. |
|
Définit à quel endroit de la grille l'enfant doit aller s'afficher. Dans cet exemple (lié à grid-template-areas vu plus haut), l'enfant doit aller dans la zone "sidebar"
|
|
Centre le contenu d'une cellule en passant outre la règle justify-items |
|
Remplit une cellule de son contenu en passant outre la règle align-items |
Plus de possibilités avec Grid ?
|
L'élément se divise en trois colonnes |
|
Espace de 10px entre les colonnes |
|
La largeur des colonnes est de 25% de son parent |
|
L'élément ciblé se répartit sur 2 colonnes |
|
Un filet gris de 2x sépare les colonnes |
|
L'élément ciblé se répartit sur 2 colonnes |
|
L'élément ciblé se répartit sur 2 colonnes |