Les flex-items sont les enfants
directs d'un container flexbox.
Les enfants directs d'un flex-container ne doivent pas être déclarés, ils deviennent automatiquement des flex-items dont la taille est celle de leur contenu.
La propriété order permet de redéfinir l'ordre dans lequel les balises vont s'afficher.
Il s'agit en quelque sorte d'un z-index, mais dans ce cas c'est comme si on réordonnait les balises à l'entrée du browser.
Par défaut toutes les balises ont la valeur 0 pour cette propriété, on peut lui attribué une valeur entière négative ou positive. L'odre dans lequel s'afficheront les balises va de la plus petite valeur de order à la plus grande.
| order |
|---|
| order:entier (+ ou -) |
on modifie l'ordre du flux |
Exemple |
Dans l'exemple, en affectant la propriété order:-1 à la huitième div du flux, on la place à la première place.
La propriété flex-grow permet d'étirer un flex-item dans l'espace restant, 0 par défaut, un entier de 1 à n.
- 0: la valeur par défaut
- 1: peut s'agrandir Exemple
- 2: peut s'agrandir et plus que le 1 Exemple
- 3: peut s'agrandir et plus que le 2 et le 1 Exemple
- etc.
La propriété flex-grow permet de rétrécir un flex-item si celui-ci n'a pas assez de place dans le flex-container, 0 par défaut et 1 si le flex-item peut se raccourcir.
- 0: la valeur par défaut
- 1: peut s'agrandir Exemple
- 2: peut s'agrandir et plus que le 1 Exemple
- 3: peut s'agrandir et plus que le 2 et le 1 Exemple
- etc.
La propriété flex regroupe les proptiétés flex-grow, flex-shrink et flex-basis
| flex |
|---|
| flex-grow |
capacité d'étirement dans l'espace restant, 0 par défaut, un entier de 1 à n, le plus grand à priorité |
Exemple
Exemple
|
| flex-shrink |
capacité de contraction d'un élément, 1 par défaut, 0 pour empêcher la contraction |
Exemple
Exemple
|
| flex-basis |
--pour mémoire-- |
--
|
La propriété align-self permet de distinguer l'alignement d'un flex-item de ses frère.
| align-self |
|---|
| align-self:auto |
on applique l'alignement général de align-items, valeur par défaut |
Exemple
|
| align-self:stretch |
élément étiré pour occuper tout l'espace disponible |
Exemple
|
| align-self:flex-start |
élément aligné au début de l'axe secondaire |
Exemple
|
| align-self:flex-end |
élément aligné à la fin de l'axe secondaire |
Exemple
|
| align-self:center |
élément est centré sur l'axe secondaire |
Exemple
|
| align-self:baseline |
élément aligné sur la ligne de base du texte (line-height) |
Exemple
|
