CSS Flexbox (boîte flexible)

Table des matières

Afficher la table des matières

1

2

3

4

5

6

7

8

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
}

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

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

</body>
</html>

Module de mise en page CSS Flexbox

Avant le module Flexbox Layout, il existait quatre modes de mise en page :

Block: En forme de bloc, pour les sections d'une page Web
Inline: En ligne, pour le texte
Table: Tableau, pour les données de tableau bidimensionnel
Positioned: Positionné, pour la position explicite d'un élément

Le module de mise en page flexible facilite la conception d'une structure de mise en page flexible et réactive sans utiliser de flottement ou de positionnement.

Prise en charge du navigateur

Les propriétés flexbox sont prises en charge dans tous les navigateurs modernes.


29.0	11.0	22.0	10	48

Éléments de la boîte flexible

Pour commencer à utiliser le modèle Flexbox, vous devez d'abord définir un conteneur flexible.

1

2

3

L'élément ci-dessus représente un conteneur flexible (la zone bleue) avec trois éléments flexibles.

Exemple

Un conteneur flexible avec trois éléments flexibles :

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

Essayez-le vous-même →

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

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>Create a Flex Container</h1>

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

<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>

<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>

</body>
</html>

Vous en apprendrez plus sur les conteneurs flexibles et les éléments flexibles dans les prochains chapitres.