CSS Flexbox
CSS Flexbox (Mise en page flexible)
CSS Flexbox est l'abréviation du module CSS Flexible Box Layout.
Flexbox est un modèle de mise en page permettant d'organiser des éléments (horizontalement ou verticalement) dans un conteneur de manière flexible et réactive.
Flexbox facilite la conception d'une mise en page flexible et réactive, sans avoir recours à float ou à un positionnement.
Élément 1
Élément 2
Élément 3
Élément 4
Élément 5
Flexbox vs. Grid
CSS Flexbox est utilisé pour une mise en page unidimensionnelle, avec des lignes OU des colonnes.
CSS Grid est utilisé pour une mise en page bidimensionnelle, avec des lignes ET des colonnes.
Composants de CSS Flexbox
Un flexbox se compose toujours de :
- Un conteneur Flex - L'élément parent (conteneur), où la propriété
displayest définie surflexouinline-flex - Un ou plusieurs éléments Flex - Les enfants directs du conteneur flex deviennent automatiquement des éléments flex
Un conteneur Flex avec trois éléments Flex
L'élément ci-dessous représente un conteneur flex (la zone bleue) avec trois éléments flex .
Élément 1
Élément 2
Élément 3
Exemple
Un conteneur flex avec trois éléments flex :
<html>
<head>
<style>
.container {
display: flex;
background-color: DodgerBlue;
}
.container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="container">
<div>Élément 1</div>
<div>Élément 2</div>
<div>Élément 3</div>
</div>
</body>
</html>
Vous en apprendrez davantage sur les conteneurs flex et les éléments flex dans les chapitres suivants.