Skip to main content

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 ou flex-gap
  • grow ou flex-grow
  • wrap ou flex-wrap