SIMPLA cheat

cheat sheet

Flex-box CSS grid



Unsplashed background img 1

dashboard

FlexBox

FlexBox (pourFlexible Box) est un mode de mise en page prévoyant une disposition des éléments d’une page de telle sorte que ces éléments possèdent un comportement prévisible lorsqu’ils doivent s’accommoder de différentes tailles d’écrans/appareils. Dans de nombreux cas, le modèle de boîte Flexbox offre une amélioration du modèle block dans lequel les flottements (float) ne sont pas utilisés, pas plus que la fusion des marges du conteneur flexible avec ses éléments.

grid_on

CSS Grid

Le module CSS Grid (modèle de disposition en grille) est un module de la spécification CSS qui permet de créer des mises en page en divisant l'espace d'affichage en régions utilisables par une application ou en définissant des relations de taille, position et d'empilement entre les éléments HTML. Comme les tableaux, la grille permet d'aligner des éléments sous forme de colonnes et de lignes mais à la différence des tableaux, la grille n'a pas de structure de contenu. Ainsi, on peut créer de nombreuses mises en page qui n'auraient pas été possibles avec les tableaux. Ainsi, les éléments fils d'un conteneur en grille peuvent être positionnés afin qu'ils se chevauchent ou qu'ils se comportent comme des éléments positionnés.



Flex

1
2
3
4
5
6
7

flex-direction

justify-content

align-items

flex-grow

Choisis tes items:

Choisis ton flex gros!:

flex-wrap

align-content

Grid

.....One
Two
.....Three
Four
Five
Six
Seven
Eight
.....Nine

Row/column

Templates

Area

Plus d'informations :