Boîte flexible CSS
1
2
3
4
5
6
sept
8
Module de mise en page CSS Flexbox
Avant le module Flexbox Layout, il y avait quatre modes de mise en page :
- Bloquer, pour les sections d'une page Web
- En ligne, pour le texte
- Table, pour les données de table à deux dimensions
- Positionné, pour la position explicite d'un élément
Le module de mise en page de boîte 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 Flexbox
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>
Vous en apprendrez plus sur les conteneurs flexibles et les éléments flexibles dans les chapitres suivants.