Flex
Les classes CSS suivantes sont utilisées pour configurer les propriétés flex.
Centrer les éléments
Élément 1
Élément 2
Élément 3
HTML
<div class="flex-center">
<div>Élément 1</div>
<div>Élément 2</div>
<div>Élément 3</div>
</div>
CSS
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
Direction des éléments flex
Élément 1
Élément 2
Élément 1
Élément 2
Élément 1
Élément 2
Élément 1
Élément 2
HTML
<div class="flex flex-row">Élément en flex row</div>
<div class="flex flex-row-reverse">Élément en flex row reverse</div>
<div class="flex flex-column">Élément en flex column</div>
<div class="flex flex-column-reverse">Élément en flex column reverse</div>
CSS
.flex {
display: flex !important;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-row {
flex-direction: row;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
.flex-column {
flex-direction: column;
}
Alignement et justification des éléments flex
Centre
Centre
Début
Début
Fin
Fin
Étiré
Étiré
HTML
<div class="flex justify-center align-center">
<div>Centre</div>
<div>Centre</div>
</div>
<div class="flex justify-start align-start">
<div>Début</div>
<div>Début</div>
</div>
<div class="flex justify-end align-end">
<div>Fin</div>
<div>Fin</div>
</div>
<div class="flex justify-stretch align-stretch">
<div>Étiré</div>
<div>Étiré</div>
</div>
CSS
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: start;
}
.justify-end {
justify-content: flex-end;
}
.justify-stretch {
justify-content: stretch;
}
.align-center {
align-items: center;
}
.align-start {
align-items: start;
}
.align-end {
align-items: flex-end;
}
.stretch, .align-stretch {
align-items: stretch;
}
Affichage
Élément flex
Élément inline
Élément inline-block
Élément inline-flex
Élément block
HTML
<div class="flex">Élément en flex</div>
<div class="inline">Élément inline</div>
<div class="inline-block">Élément inline-block</div>
<div class="inline-flex">Élément inline-flex</div>
<div class="block">Élément block</div>
CSS
.inline {
display: inline !important;
}
.inline-block {
display: inline-block !important;
}
.inline-flex {
display: inline-flex !important;
}
.block {
display: block !important;
}
Propriétés supplémentaires
Fill
Pas de fill
Fill
Fill aussi
Grow
Pas de grow
Wrap 1
Wrap 2
Wrap 3
Gap 1
Gap 2
Gap 3
HTML
<div class="flex-fill">Élément flex-fill</div>
<div class="grow">Élément grow</div>
<div class="wrap">Élément wrap</div>
<div class="gap">Élément gap</div>
CSS
.flex-fill {
flex: 1 1 auto !important;
}
.grow, .flex-grow {
flex-grow: 1;
}
.wrap, .flex-wrap {
flex-wrap: wrap;
}
.gap, .flex-gap {
gap: 2px 16px;
}
Liste d'alternatives
gap
ouflex-gap
grow
ouflex-grow
wrap
ouflex-wrap