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