Disposition des boîtes flexibles CSS

Le module de disposition des boîtes flexibles CSS définit un modèle de boîte CSS optimisé pour la conception d'interfaces utilisateur et la disposition des éléments dans une seule dimension. Dans le modèle de disposition flexible, les éléments enfants d'un conteneur flexible peuvent être disposés dans n'importe quelle direction et peuvent « s'adapter » en taille, soit en s'étendant pour remplir l'espace inutilisé, soit en se rétrécissant pour éviter de déborder de leur élément parent. L'alignement horizontal et vertical des éléments enfants peut être facilement modifié.

Disposition des boîtes flexibles en action

Dans l'exemple suivant, un conteneur a été défini avec la propriété display: flex, ce qui signifie que les trois éléments enfants deviennent des éléments flexibles. La valeur de justify-content a été définie sur space-between afin d'espacer les éléments de manière uniforme sur l'axe principal. Un espace égal est placé entre chaque élément, les éléments de gauche et de droite étant alignés sur les bords du conteneur flexible. Vous pouvez également voir que les éléments s'étirent sur l'axe secondaire, en raison de la valeur par défaut de align-items qui est stretch. Les éléments s'étirent à la hauteur du conteneur flexible, ce qui les fait apparaître aussi grands que l'élément le plus grand.

html

<div class="boite">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois <br />a <br />du <br />texte <br />supplémentaire</div>
</div>

css

body {
  font-family: sans-serif;
}

.boite {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  justify-content: space-between;
}

.boite > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
}

Concepts de base des boîtes flexibles: Un aperçu de la fonctionnalité des boîtes flexibles.
Relation des boîtes flexibles avec d'autres méthodes de mise en page: Comment les boîtes flexibles se rapportent aux autres méthodes de mise en page et aux autres spécifications CSS.
Aligner les éléments dans un conteneur flexible: Comment les propriétés d'alignement des boîtes fonctionnent avec les boîtes flexibles.
Ordonner les éléments flexibles: Explication des différentes façons de changer l'ordre et la direction des éléments, et des problèmes potentiels liés à cette opération.
Contrôler les proportions des éléments flexibles le long de l'axe principal: Explication des propriétés flex-grow, flex-shrink et flex-basis.
Maîtriser le retour à la ligne des éléments flexibles: Comment créer des conteneurs flexibles avec plusieurs lignes et contrôler l'affichage des éléments dans ces lignes.
Cas d'utilisation typiques des boîtes flexibles: Modèles de conception courants qui sont des cas d'utilisation typiques des boîtes flexibles.
Disposition CSS : boîtes flexibles: Apprenez à utiliser la mise en page en boîtes flexibles pour créer des mises en page web.
Alignement des boîtes dans les boîtes flexibles: Détaille les fonctionnalités de l'alignement des boîtes CSS qui sont spécifiques aux boîtes flexibles.