Disposition des botes flexibles CSS

Le module de disposition des botes flexibles CSS dfinit un modle de bote CSS optimis pour la conception d'interfaces utilisateur et la disposition des lments dans une seule dimension. Dans le modle de disposition flexible, les lments enfants d'un conteneur flexible peuvent tre disposs dans n'importe quelle direction et peuvent s'adapter en taille, soit en s'tendant pour remplir l'espace inutilis, soit en se rtrcissant pour viter de dborder de leur lment parent. L'alignement horizontal et vertical des lments enfants peut tre facilement modifi.

Dans cet article

Disposition des botes flexibles en action
Rfrence
Guides
Concepts associs
Spcifications
Voir aussi

Disposition des botes flexibles en action

Dans l'exemple suivant, un conteneur a t dfini avec la proprit display: flex, ce qui signifie que les trois lments enfants deviennent des lments flexibles. La valeur de justify-content a t dfinie sur space-between afin d'espacer les lments de manire uniforme sur l'axe principal. Un espace gal est plac entre chaque lment, les lments de gauche et de droite tant aligns sur les bords du conteneur flexible. Vous pouvez galement voir que les lments s'tirent sur l'axe secondaire, en raison de la valeur par dfaut de align-items qui est stretch. Les lments s'tirent la hauteur du conteneur flexible, ce qui les fait apparatre aussi grands que l'lment le plus grand.

html

<div class="boite">
  <div>Un</div>
  <div>Deux</div>
  <div>Trois <br />a <br />du <br />texte <br />supplmentaire</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 botes flexibles: Un aperu de la fonctionnalit des botes flexibles.
Relation des botes flexibles avec d'autres mthodes de mise en page: Comment les botes flexibles se rapportent aux autres mthodes de mise en page et aux autres spcifications CSS.
Aligner les lments dans un conteneur flexible: Comment les proprits d'alignement des botes fonctionnent avec les botes flexibles.
Ordonner les lments flexibles: Explication des diffrentes faons de changer l'ordre et la direction des lments, et des problmes potentiels lis cette opration.
Contrler les proportions des lments flexibles le long de l'axe principal: Explication des proprits flex-grow, flex-shrink et flex-basis.
Matriser le retour la ligne des lments flexibles: Comment crer des conteneurs flexibles avec plusieurs lignes et contrler l'affichage des lments dans ces lignes.
Cas d'utilisation typiques des botes flexibles: Modles de conception courants qui sont des cas d'utilisation typiques des botes flexibles.
Disposition CSS : botes flexibles: Apprenez utiliser la mise en page en botes flexibles pour crer des mises en page web.
Alignement des botes dans les botes flexibles: Dtaille les fonctionnalits de l'alignement des botes CSS qui sont spcifiques aux botes flexibles.
Dfinir les espaces CSS: Comprendre et dfinir les espaces dans les mises en page en grille, en botes flexibles et en colonnes multiples, y compris la manire dont les valeurs en pourcentage sont rsolues.