FLEXBOX

AIDE MÉMOIRE V1.0

C’est le parent class=“container“

<div class=“container“>
<div class =“children“> <div class =“children“> <div class =“children“>

</div> </div> </div>

</div>

Ce sont les enfants class=“children“

Initialiser flex-box display

main axis .container { display: flex; } OU .container { display: inline-flex; }

cross axis

A NOTER : dans les exemples ci-dessous, la hauteur des enfants (height) n’est pas déclarée.

Directions flex-direction
avec justify-content

1 3

Lorem
1 2 ipsum
3 3 2 1 2 2

.container { flex-direction: row ;} .container { flex-direction: row-reverse ; } 3 1

.container { .container {
flex-direction: column flex-direction: column-reverse;
} }

Justification justify-content

.container { justify-content: flex-start } .container { justify-content: flex-end ;}

.container { justify-content: center ; } .container { justify-content: space-between ; }

.container { justify-content: space-around ; }

Alignement vertical align-items

.container { align-items: flex-start ; } .container { align-items: flex-end ; } .container { align-items: center ; }

Texte Texte Texte

Pour aligner verticalement et

horizontalement, il faut mixer
les différentes propriétés :
justify-content: center
+ align-items: center
.container { align-items: stretch; } .container { align-items: baseline ;}

Alignement des contenus sur des lignes flexibles align-content

.container { align-content: flex-start ; .container { align-content: flex-end ; .container { align-content: center;

flex-wrap: wrap; } flex-wrap: wrap;} flex-wrap: wrap;}

.container { align-content: space-around;

.container { align-content: stretch; .container { align-content: space-between; flex-wrap: wrap; }
flex-wrap: wrap;} flex-wrap: wrap; }

Retour à la ligne flex-wrap

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

5 6 7 8 1 2 3 4
.container { flex-wrap: nowrap; } .container { flex-wrap: wrap; } .container { flex-wrap: wrap-reverse; }

Raccourci pour flex-direction + flex-wrap flex-flow

6 5 4
3 2 1
.container { flex-flow: row-reverse wrap-reverse;}

CSS spécifiques à l’enfant

Modifier l’ordre des enfants order

1 2
4 5
.children { order: 0; }
3 4 3 2
6 1
.children:nth-of-type(1) {order:4;}
.children:nth-of-type(2) {order:3;}
.children:nth-of-type(3) {order:2;}
.children:nth-of-type(4) {order:1;}

Agrandir un enfant (valeur relative aux reste de l’espace disponible) flex-grow

A NOTER : dans les exemples ci-dessous, la largeur des enfants (width) n’est pas déclarée.

.children:nth-of-type(1) { flex-grow: 1;}

.children:nth-of-type(2) { flex-grow: 3;}
.children:nth-of-type(3) { flex-grow: 1;}

Rétrécir un enfant (valeur relative aux reste de l’espace disponible) flex-shrink

.children:nth-of-type(2) { flex-shrink: 2 ; }

Force la largeur d’un enfant flex-basic

auto 80% auto

.children:nth-of-type(2) { flex-basis : 80% ; }

Raccourci flex-grow + flex-shrink + flex-basis flex

.children:nth-of-type(1) { flex : 0 0 200px; }

2 3
.container { flex-wrap: wrap ; }
valeur toujours égale à 200px .children:nth-of-type(1) { flex : 1 100% ; }
.children:nth-of-type(2) { flex: 1 ; }
.children:nth-of-type(3) { flex: 1 ; }

Alignement avec une exception align-self

.children:nth-of-type(2) {align-self: flex-end;}

c

https://jaetheme.com/blog/flexbox