Flexbox

Classes utilitaires Flexbox. Chaque propriété CSS Flexbox est accessible via une classe courte. Toutes les classes sont disponibles en variante responsive via le suffixe -{bp}, généré automatiquement depuis la map $breakpoints.

Stable Sans JS Responsive

Aperçu

LIVE PREVIEW — FLEX DE BASE
.d-flex
.jc-between
.ai-center
Item A
Item B
Item C
.fd-column
Item 2
Item 3

Display

CLASSE PROPRIÉTÉ CSS
.d-flex display: flex
.d-inline-flex display: inline-flex
LIVE PREVIEW — DISPLAY

.d-flex — occupe toute la largeur disponible

Item A
Item B

.d-inline-flex — s'adapte à son contenu

Item A
Item B

Direction

CLASSE PROPRIÉTÉ CSS
.fd-row flex-direction: row
.fd-row-reverse flex-direction: row-reverse
.fd-column flex-direction: column
.fd-column-reverse flex-direction: column-reverse
LIVE PREVIEW — DIRECTION

.fd-row

1
2
3

.fd-row-reverse

1
2
3

.fd-column

1
2
3

.fd-column-reverse

1
2
3

Wrap

CLASSE PROPRIÉTÉ CSS
.fw-wrap flex-wrap: wrap
.fw-nowrap flex-wrap: nowrap
.fw-wrap-reverse flex-wrap: wrap-reverse

Justify Content

CLASSE PROPRIÉTÉ CSS
.jc-start justify-content: flex-start
.jc-center justify-content: center
.jc-end justify-content: flex-end
.jc-between justify-content: space-between
.jc-around justify-content: space-around
.jc-evenly justify-content: space-evenly
LIVE PREVIEW — JUSTIFY CONTENT

.jc-start

A
B
C

.jc-center

A
B
C

.jc-end

A
B
C

.jc-between

A
B
C

.jc-around

A
B
C

.jc-evenly

A
B
C

Align Items

CLASSE PROPRIÉTÉ CSS
.ai-start align-items: flex-start
.ai-center align-items: center
.ai-end align-items: flex-end
.ai-baseline align-items: baseline
.ai-stretch align-items: stretch
LIVE PREVIEW — ALIGN ITEMS

.ai-start

A
B
C

.ai-center

A
B
C

.ai-end

A
B
C

.ai-stretch

A
B
C

Align Self

S'applique sur un enfant individuel pour écraser le align-items de son parent.

CLASSE PROPRIÉTÉ CSS
.as-start align-self: flex-start
.as-center align-self: center
.as-end align-self: flex-end
.as-stretch align-self: stretch
.as-baseline align-self: baseline
LIVE PREVIEW — ALIGN SELF
start
center
end
stretch

Align Content

S'applique sur le conteneur flex multi-lignes (nécessite .fw-wrap).

CLASSE PROPRIÉTÉ CSS
.ac-start align-content: flex-start
.ac-center align-content: center
.ac-end align-content: flex-end
.ac-between align-content: space-between
.ac-around align-content: space-around
.ac-stretch align-content: stretch

Flex utilitaires

CLASSE PROPRIÉTÉ CSS DESCRIPTION
.flex-fill flex: 1 1 auto L'élément occupe tout l'espace disponible et peut rétrécir si nécessaire.
.flex-1-1-auto flex: 1 1 auto Identique à .flex-fill.
.flex-grow-0 flex-grow: 0 L'élément ne s'étend pas pour occuper l'espace disponible.
.flex-grow-1 flex-grow: 1 L'élément s'étend pour occuper l'espace disponible.
.flex-shrink-0 flex-shrink: 0 L'élément ne rétrécit pas en dessous de sa taille de base.
.flex-shrink-1 flex-shrink: 1 L'élément peut rétrécir si l'espace manque.
LIVE PREVIEW — FLEX UTILITAIRES

.flex-fill — occupe tout l'espace restant

Fixe
flex-fill
Fixe

.flex-shrink-0 — ne rétrécit pas

shrink-0 (200px)
flex-fill

Responsive

Toutes les classes sont disponibles en variante responsive via le suffixe -{bp}. Elles s'activent à partir du breakpoint spécifié via @media (min-width).

CLASSES RESPONSIVES HTML
Item A
Item B
Item C
Item A
Item B
Item A
Item B

ℹ️ Mobile-first

Les variantes responsives utilisent min-width — elles s'appliquent à partir du breakpoint spécifié et au-delà. En dessous, la classe de base (sans suffixe) s'applique. Les breakpoints disponibles sont ceux définis dans $breakpoints.

Notes & bonnes pratiques

✅ À faire

Combiner librement les classes sur un même élément : .d-flex .jc-between .ai-center sont indépendantes et ne se conflictuent pas.

✅ À faire

Utiliser .flex-shrink-0 sur les éléments à largeur fixe dans un conteneur flex pour éviter qu'ils ne rétrécissent sous leur taille de base lorsque l'espace manque.

⚠️ Attention

.ac-* (align-content) n'a d'effet que sur un conteneur flex multi-lignes. Sans .fw-wrap, tous les items sont sur une seule ligne et align-content est sans effet.

⚠️ Attention

.as-* (align-self) s'applique sur l'enfant, pas sur le conteneur. Ne pas le confondre avec .ai-* qui s'applique sur le parent et affecte tous les enfants.

Flexbox · WEBDEV-UI DOCS / V1