Éléments de la boîte flexible CSS

Table des matières

    Afficher la table des matières

Éléments enfants (éléments)

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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Flexible Items</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div> 
  <div>4</div>
</div>

<p>All direct children of a flexible container becomes flexible items.</p>

</body>
</html>

Les propriétés de l'élément flexible sont :

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

La propriété de commande

La propriété order spécifie l'ordre des éléments flexibles.

1

2

3

4

Le premier élément flexible du code ne doit pas nécessairement apparaître comme 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 changer 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The order Property</h1>

<p>Use the order property to sort the flex items as you like:</p>

<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>

</body>
</html>

La propriété flex-grow

La propriété flex-grow 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-grow Property</h1>

<p>Make the third flex item grow eight times faster than the other flex items:</p>

<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>

</body>
</html>

La propriété flex-shrink

La propriété flex-shrink spécifie de combien un élément flexible sera réduit par rapport au reste des éléments flexibles.

1

2

3

4

5

6

7

8

9

10

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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-shrink Property</h1>

<p>Do not let the third flex item shrink as much as the other flex items:</p>

<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>

</body>
</html>

La propriété flex-basis

La propriété flex-basis 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex-basis Property</h1>

<p>Set the initial length of the third flex item to 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

La propriété flex

La propriété flex est une propriété abrégée pour Propriétés flex-grow, flex-shrink et flex-basis.

Exemple

Rendre le troisième élément flexible non extensible (0), non rétractable (0) et avec un 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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  align-items: stretch;
  background-color: #f1f1f1;
}

.flex-container>div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The flex Property</h1>

<p>Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

La propriété align-self

La propriété align-self spécifie l'alignement de l'élément sélectionné à l'intérieur du conteneur flexible.

La propriété align-self remplace l'alignement par défaut défini par la propriété align-items du conteneur.

1

2

3

4

Dans ces exemples, nous utilisons un conteneur de 200 pixels de haut, pour mieux démontrer le propriété align-self :

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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: center;" aligns the selected flex item in the middle of the container:</p>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="align-self: center">3</div>
  <div>4</div>
</div>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Exemple

Alignez le deuxième élément flexible en haut du conteneur et le troisième élément flexible en haut du conteneur. fond du récipient :

<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>

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  height: 200px;
  background-color: #f1f1f1;
}

.flex-container > div {
  background-color: DodgerBlue;
  color: white;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The align-self Property</h1>

<p>The "align-self: flex-start;" aligns the selected flex item at the top of the container.</p>
<p>The "align-self: flex-end;" aligns the selected flex item at the bottom of the container.</p>

<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>

<p>The align-self property overrides the align-items property of the container.</p>

</body>
</html>

Les propriétés des éléments CSS Flexbox

Le tableau suivant répertorie toutes les propriétés des éléments CSS Flexbox :

align-self

Spécifie l'alignement d'un élément flexible (remplace la propriété align-items du conteneur flexible)

flex

Une propriété abrégée pour flex-grow, flex-shrink et flex-basis propriétés

flex-basis

Spécifie la longueur initiale d'un élément flexible

flex-grow

Spécifie la croissance d'un élément flexible par rapport au reste des éléments flexibles à l'intérieur du même conteneur.

flex-shrink

Spécifie dans quelle mesure un élément flexible sera réduit par rapport au reste des éléments flexibles à l'intérieur du même conteneur.

order

Spécifie l'ordre des éléments flexibles à l'intérieur du même conteneur