CSS Flex Items
Éléments Flex CSS
Les éléments enfants directs d'un conteneur flex deviennent automatiquement des éléments flex.
Les éléments flex peuvent avoir les propriétés suivantes :
-
order- Spécifie l'ordre d'affichage des éléments flex à l'intérieur du conteneur flex. -
flex-grow- Spécifie combien un élément flex va grandir par rapport aux autres éléments flex. -
flex-shrink- Spécifie combien un élément flex va rétrécir par rapport aux autres éléments flex. -
flex-basis- Spécifie la longueur initiale d'un élément flex. -
flex- Propriété abrégée pourflex-grow,flex-shrinketflex-basis. -
align-self- Spécifie l'alignement de l'élément flex à l'intérieur du conteneur flex.
Propriété order CSS
La propriété order spécifie l'ordre d'affichage des éléments flex à l'intérieur du conteneur flex.
Le premier élément flex dans le code source n'a pas besoin d'apparaître comme le premier élément dans la mise en page.
La valeur de l'ordre doit être un nombre, et la valeur par défaut est 0.
Exemple
La valeur order spécifie l'ordre d'affichage des éléments flex :
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div> Résultat :
Propriété flex-grow CSS
La propriété flex-grow spécifie combien un élément flex va grandir par rapport aux autres éléments flex.
La valeur doit être un nombre, et la valeur par défaut est 0.
Exemple
Faites en sorte que le troisième élément flex grandisse quatre fois plus vite que les autres éléments flex :
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 4">3</div>
</div> Résultat :
Propriété flex-shrink CSS
La propriété flex-shrink spécifie combien un élément flex va rétrécir par rapport aux autres éléments flex.
La valeur doit être un nombre, et la valeur par défaut est 1.
Exemple
Laissez le troisième élément flex rétrécir deux fois plus que les autres éléments flex :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 2">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div> Résultat :
Propriété flex-basis CSS
La propriété flex-basis spécifie la longueur initiale d'un élément flex.
Exemple
Définissez la longueur initiale du troisième élément flex à 250 pixels :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 250px">3</div>
<div>4</div>
</div> Résultat :
Propriété flex CSS
La propriété flex est une propriété abrégée pour les propriétés flex-grow , flex-shrink et flex-basis .
Exemple
Faites en sorte que le troisième élément flex soit extensible (1), non rétrécissable (0) et avec une longueur initiale de 150 pixels :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 1 0 150px">3</div>
<div>4</div>
</div>
Propriété align-self CSS
La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur flexible.
Cette propriété remplace l'alignement par défaut défini par la propriété align-items du conteneur.
Dans ces exemples, nous utilisons un conteneur de 200 pixels de haut pour mieux démontrer la propriété align-self :
Exemple
Alignez le troisième élément flex au milieu du conteneur :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div> Résultat :
Exemple
Alignez le deuxième élément flex en haut du conteneur et le troisième élément flex en bas du conteneur :
<div class="flex-container">
<div>1</div>
<div style="align-self: flex-start">2</div>
<div style="align-self: flex-end">3</div>
<div>4</div>
</div> Résultat :
Les Propriétés des Éléments Flex CSS
Le tableau suivant répertorie toutes les propriétés des Éléments Flex CSS :
| Propriété | Description |
|---|---|
| align-self | Spécifie l'alignement d'un élément flex (remplace la propriété align-items du conteneur flex). |
| flex | Propriété abrégée pour les propriétés flex-grow, flex-shrink et flex-basis. |
| flex-basis | Spécifie la longueur initiale d'un élément flex. |
| flex-grow | Spécifie combien un élément flex va grandir par rapport aux autres éléments flex à l'intérieur du conteneur. |
| flex-shrink | Spécifie combien un élément flex va rétrécir par rapport aux autres éléments flex à l'intérieur du conteneur. |
| order | Spécifie l'ordre des éléments flex à l'intérieur du conteneur. |