display : flex

display : flex ;

display : inline-flex ;

Flexbox est un nouveau outil css pour faciliter l'affichage des boites alignées en colonnes ou en rang sans devoir gérer d'éléments float et les blocs autour.

Flexbox est particulièrement utile pour le flexible layout et permet d'éviter les problèmes de marges qui disparaissent.

Concept clé : flexbox nécessite un flex container et des flex child (les items à disposer en colonnes ou rangs.)

Concept clé : le flex container aligne ses éléments child le long d'une flex line

flex-flow :
[row nowrap]
Un shorthand pour flex-direction et flex-wrap.
Exemple d'utilisation courante de flex :

parent { display : flex ; flex-flow : row wrap ; align-items : stretch ; }
1
child { flex : 1 1 33% ; }
2
child { flex : 1 1 33% ; }
3
child { flex : 1 1 33% ; }

Un exemple flex régulier :

display : flex ;
1
2
3

direction :
[ltr | rtl]
Permet de changer la direction des boîtes flex (et la direction du texte)
ltr = left to rigth
rtl = right to left

display : flex ; (texte inversé aussi)
1
2
3

flex-direction :
[row | row-reverse | column | column-reverse]
Permet (comme direction) de changer la direction des boîtes flex. Possible de créer des colonnes aussi (et de les inverser.)

display : flex ;
flex-direction : row ;
1
2
3
display : flex ;
flex-direction : row-reverse ;
1
2
3
display : flex ;
flex-direction : column ;
1
2
3
display : flex ;
flex-direction : column-reverse ;
1
2
3

justify-content :
[flex-start | flex-end | center | space-between | space-around]
Permet de décider comment gérer les flex child si ils n'occupent pas tout l'espace disponible.

display : flex ;
justify-content : flex-start ;
1
2
display : flex ;
justify-content : flex-end ;
1
2
display : flex ;
justify-content : center ;
1
2
display : flex ;
justify-content : space-between ;
1
2
display : flex ;
justify-content : space-around ;
1
2

align-items :
[stretch | center | flex-start | flex-end | baseline]
Permet de décider de l'alignement des flex childs.

display : flex ;
align-items : stretch ;
(étirer les childs pour remplir le container en hauteur.)
1
2
display : flex ;
align-items : center ;
1
2
display : flex ;
align-items : flex-start ;
1
2
display : flex ;
align-items : flex-end ;
1
2
display : flex ;
align-items : baseline ;
1
2

flex-wrap :
[nowrap | wrap | wrap-reverse]
Permet de décider si les childs doivent changer de lignes si ils débordent de la ligne prévue.

display : flex ;
flex-wrap : nowrap ;
(force tout les éléments sur la ligne. Si il n'y a pas de place, scroll.)
1
2
3
4
5
display : flex ;
flex-wrap : wrap ;
1
2
3
4
5
display : flex ;
flex-wrap : wrap-reverse ;
1
2
3
4
5

align-content :
[stretch | center | flex-start | flex-end | space-between | space-around]
Modifie la propriété flex-wrap : wrap pour déterminer d'une flex line.
VIP : cette propriété ne prend effet QUE si il y a plus d'une ligne d'éléments.

display : flex ;
flex-wrap : wrap ;
align-content : stretch ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display : flex ;
flex-wrap : wrap ;
align-content : center ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display : flex ;
flex-wrap : wrap ;
align-content : flex-start ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display : flex ;
flex-wrap : wrap ;
align-content : flex-end ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display : flex ;
flex-wrap : wrap ;
align-content : space-between ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
display : flex ;
flex-wrap : wrap ;
align-content : space-around ;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

order :
[number (0 et +)]
Modifie l'ordre de l'élément flex dans son container flex.

display : flex ;
1
2
3 order : -2 ;

margins : auto

Le comportement de margin : auto est différent pour un child flex.
Lorsqu'il y a plusieurs childs flex, celui avec margin : auto auto absorbera l'espace en trop du container :

display : flex ;
1 margin : auto ;
2
3

Et pour centrer un bloc verticalement et horizontalement, margin : auto est miraculeux :

display : flex ;
margin : auto ;

align-self :
[auto | stretch | center | flex-start | flex-end | baseline]
Permet de changer l'alignement flex d'un élément, override l'alignement du parent pour cet élément.

display : flex ;
align-items : center ;
1
2 align-self : auto ;
override l'align-item : center du parent
3
display : flex ;
align-items : center ;
1
2 align-self : stretch ;
override l'align-item : center du parent
3
display : flex ;
align-items : stretch ;
1
2 align-self : center ;
override l'align-item : center du stretch
3
display : flex ;
align-items : center ;
1
2 align-self : flex-start ;
override l'align-item : center du parent
3
display : flex ;
align-items : center ;
1
2 align-self : flex-end ;
override l'align-item : center du parent
3
display : flex ;
align-items : center ;
1
2 align-self : baseline ;
override l'align-item : center du parent
3

flex :
[flex-grow(0+) + flex-shrink(0+) + flex-basis(0+) | auto(= 1 0) | none(= 0 0)]
Permet de spécifier la largeur relative de l'item flex par rapport aux autres items flex d'un même container.
Si on spécifie flex : 2 pour un item parmit une liste de 4 items, le premier occupera la moitié de l'espace disponible (2/4).
flex-grow : largeur occupée de l'élément flex par rapport aux autres élément flex du parent.
flex-shrink : contraire : représente la largeur occupée par l'élément, mais représente la fraction d'une largeur d'élément. flex-shrink: 2 signifie que l'élément occupera 1/2 largeur d'item.
flex-basis : permet de spécifier en pixel la largeur référence d'un item flex.

display : flex ;
1flex : 1 ;
2 flex : 2 ;(flex-grow, 2X espace)
3 flex : 1 ;
display : flex ;
1flex : 1 ;
2 flex : 0 3 ;(flex-shrink, 1/3 espace)
3 flex : 1 ;
display : flex ;
1flex : 1 ;
2 flex : 0 0 400px ;(flex-basis, 400px de large)
3 flex : 1 ;