Éléments flexibles CSS
Éléments enfants (articles)
Les éléments enfants directs d'un conteneur flex deviennent automatiquement des éléments flexibles (flex).
1
2
3
4
L'élément ci-dessus représente quatre éléments flexibles bleus à l'intérieur d'un conteneur flexible gris.
Exemple
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
Les propriétés de l'élément flexible sont :
La propriété de l'ordre
La orderpropriété spécifie l'ordre des éléments flexibles.
1
2
3
4
Le premier élément flexible du code n'a pas à apparaître comme le premier élément de la mise en page.
La valeur de la commande doit être un nombre, la valeur par défaut est 0.
Exemple
La propriété order peut modifier l'ordre des éléments flexibles :
<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>
La propriété flex-grow
La flex-growpropriété spécifie la croissance d'un élément flexible par rapport au reste des éléments flexibles.
1
2
3
La valeur doit être un nombre, la valeur par défaut est 0.
Exemple
Faites croître le troisième élément flexible huit fois plus vite que les autres éléments flexibles :
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow:
8">3</div>
</div>
La propriété flex-shrink
La flex-shrinkpropriété spécifie de combien un élément flexible rétrécira par rapport au reste des éléments flexibles.
1
2
3
4
5
6
sept
8
9
dix
La valeur doit être un nombre, la valeur par défaut est 1.
Exemple
Ne laissez pas le troisième élément flexible rétrécir autant que les autres éléments flexibles :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink:
0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
La propriété flex-basis
La flex-basispropriété spécifie la longueur initiale d'un élément flexible.
1
2
3
4
Exemple
Définissez la longueur initiale du troisième élément flexible sur 200 pixels :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>
La propriété flexible
La flexpropriété est une propriété abrégée pour les propriétés
flex-grow, flex-shrinket flex-basis.
Exemple
Rendez le troisième élément flexible non extensible (0), non rétractable (0) et avec une longueur initiale de 200 pixels :
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex:
0 0 200px">3</div>
<div>4</div>
</div>
La propriété align-self
La align-selfpropriété spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur flexible.
La align-self propriété remplace l'alignement par défaut défini par la align-itemspropriété du conteneur.
1
2
3
4
Dans ces exemples, nous utilisons un conteneur de 200 pixels de haut, pour mieux démontrer la
align-selfpropriété :
Exemple
Alignez le troisième élément flexible 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>
Exemple
Alignez le deuxième élément flexible en haut du conteneur et le troisième élément flexible 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>
Les propriétés des éléments CSS Flexbox
Le tableau suivant répertorie toutes les propriétés CSS Flexbox Items :
| Property | Description |
|---|---|
| align-self | Specifies the alignment for a flex item (overrides the flex container's align-items property) |
| flex | A shorthand property for the flex-grow, flex-shrink, and the flex-basis properties |
| flex-basis | Specifies the initial length of a flex item |
| flex-grow | Specifies how much a flex item will grow relative to the rest of the flex items inside the same container |
| flex-shrink | Specifies how much a flex item will shrink relative to the rest of the flex items inside the same container |
| order | Specifies the order of the flex items inside the same container |