Initialiser Flexbox avec display: flex

S'applique au conteneur flexible (parent)

display: flex

1

2

3

4

5

Direction générale avec flex-direction

S'applique au conteneur flexible (parent)

flex-direction: row (par défaut)

1

2

3

4

5

flex-direction: column

1

2

3

4

5

Retours à la ligne avec flex-wrap

S'applique au conteneur flexible (parent)

flex-wrap: nowrap

1

2

3

4

5

flex-wrap: wrap

1

2

3

4

5

Justification avec justify-content

S'applique au conteneur flexible (parent)

justify-content: flex-start (par défaut)

1

2

3

justify-content: flex-end

1

2

3

justify-content: center

1

2

3

justify-content: space-between

1

2

3

justify-content: space-around

1

2

3

Alignement du contenu avec align-items

S'applique au conteneur flexible (parent)

align-items: stretch (par défaut)

1

2

3

align-items: flex-start

1

2

3

align-items: center

1

2

3

align-items: flex-end

1

2

3

Cas pratique : centrer verticalement et horizontalement !

S'applique au conteneur flexible (parent)

justify-content: center

align-items: center

1

2

3

Accroissement avec flex-grow

S'applique à l'élément flexible (enfant)

flex-grow: 1

1

1

1

flex-grow: 2

1

2

1

Alignement particulier avec align-self

S'applique à l'élément flexible (enfant)

align-self: flex-start

1

align-self: flex-end

Changer l'ordre avec order

S'applique aux éléments flexibles (enfants)

1 (order : 1)

2 (order : 2)

3 (order : 0)