Flex

Les flex-boxs permettent de disposer les éléments d’une page, un peu comme les float, mais de telle sorte qu’ils aient toujours le même comportement quelle que soit la taille de l’écran. Permet d’obtenir un layout responsive facilement.

flex-flow (container)

display: flex rend tous les enfants de l’élément courant “flexibles” [CSS3]
Les propriétés flex n’ont aucun effet si le type du bloc n’est pas flex.
```
display: flex
```
flex-direction
Définit si les enfants doivent être affichés en ligne ou en colonne [CSS3]
```
flex-direction: row | row-reverse | column | column-reverse
```
flex-wrap
Définit si les enfants doivent être affichés sur plusieurs lignes, s’ils ne rentrent pas dans le container en une ligne [CSS3]
```
flex-wrap: nowrap | wrap | wrap-reverse
```
flex-flow
Est un raccourci pour flex-direction et flex-wrap [CSS3]
```
flex-flow: <direction> <wrap>
```

align-items (container)

justify-content
Définit l’alignement des enfants à l’intérieur de l’élément (début, fin, centre, etc) [CSS3]
```
justify-content: flex-start | flex-end | center | space-between | space-around
```

align-items
Définit l’alignement des enfants sur l’axe secondaire [CSS3]

align-items: stretch | flex-start | flex-end | center | baseline
(= vertical si les enfants sont affichés en colonne et inversemment)

align-content
Définit le comportement des lignes sur l’axe secondaire lorsqu’il y en a plusieurs [CSS3]
```
align-content: stretch | flex-start | flex-end | center | space-between | space-around
```

Exemple:

{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  align-content: space-around;
}

flex (child)

flex-basis
Définit la taille de base de l’élément (avant d’etre traitée par flex-grow / flex-shrink) [CSS3]
Définit la largeur de l’élément si flex-direction: row, la hauteur sinon
```
flex-basis: <length>
```
flex-grow
Définit le facteur d’agrandissement de l’élément pour remplir le conteneur [CSS3]
0 par défaut
```
flex-grow: <number>
```
flex-shrink
Définit le facteur de rétrécissement de l’élément pour rentrer dans le conteneur [CSS3]
1 par défaut (inférieur à 1: agrandir, supérieur à 1 : rétrécir)
```
flex-shrink: <number>
```
flex
Est un raccourci pour flex-grow, flex-shrink et flex-basis [CSS3]
```
flex: <grow> <shrink> <basis>
```

Exemple:

{
  flex-basis: 4em;
  flex-grow: 1;
}

align-self (child)

order
Modifie l’ordre HTML des enfants [CSS3]
```
order: <number>
```

align-self
Écrase align-items au niveau de l’enfant [CSS3]

align-self: stretch | flex-start | flex-end | center | baseline

Exemple:
JSFiddle flexbox

This site is open source. Improve this page.