Flexibilité

On peut définir la façon dont l'espace va être occupé par chaque élément.

DéfinitionTaille de base

flex-basis

On peut définir la taille de base des éléments

1
<div class="flex">
2
									<div class="div1">
3
									Contenu 1
4
									</div>
5
									<div class="div2">
6
									Contenu 2
7
									</div>
8
									<div class="div3">
9
									Contenu 3
10
									</div>
11
									</div>
1
div.flex {
2
									display: flex;
3
									}
4
									.flex > div{
5
									flex-basis: 100px;
6
									}
Contenu 1
Contenu 2
Contenu 3
Flexibilité : basis

DéfinitionGrossissement

flex-grow

permet de définir la portion de grossissement d'un élément, afin d'occuper l'espace restant.

1
<div class="flex">
2
									<div class="div1">
3
									Contenu 1
4
									</div>
5
									<div class="div2">
6
									Contenu 2
7
									</div>
8
									<div class="div3">
9
									Contenu 3
10
									</div>
11
									</div>
1
div.flex {
2
									display: flex;
3
									}
4
									.flex > div{
5
									flex-basis: 100px;
6
									}
7
									.div1{
8
									flex-grow: 1;
9
									}
10
									.div2{
11
									flex-grow: 2;
12
									}
13
									.div3{
14
									flex-grow: 3;
15
									}

Les éléments étant flexibles, ils grossissent pour occuper leur conteneur, en proportion de leur flex-grow.

Dans notre cas, Le premier div récupère 1/6 ( 1/(1+2+3) ) de l'espace restant, le deuxième 1/3 ( 2/(1+2+3) ), le troisième 1/2 ( 3/(1+2+3) )

Contenu 1
Contenu 2
Contenu 3
Flexibilité : grow

DéfinitionRétrécissement

flex-shrink

permet de définir la portion de rétrécissement d'un élément.

1
<div class="flex">
2
									<div class="div1">
3
									Contenu 1
4
									</div>
5
									<div class="div2">
6
									Contenu 2
7
									</div>
8
									<div class="div3">
9
									Contenu 3
10
									</div>
11
									</div>
1
div.flex {
2
									display: flex;
3
									}
4
									.flex > div{
5
									flex-basis: 200px;
6
									}
7
									.div1{
8
									flex-shrink: 1;
9
									}
10
									.div2{
11
									flex-shrink: 2;
12
									}
13
									.div3{
14
									flex-shrink: 3;
15
									}

Les éléments étant flexibles, ils rétrécissent pour occuper leur conteneur, en proportion de leur flex-shrink.

Dans notre cas, Le premier div perd 1/6 ( 1/(1+2+3) ) de l'espace perdu, le deuxième 1/3 ( 2/(1+2+3) ), le troisième 1/2 ( 3/(1+2+3) )

Contenu 1
Contenu 2
Contenu 3
Flexibilité : shrink

DéfinitionRaccorcie

flex

flex est une propriété raccourcie.

1
flex: basis grow shrink;
1
<div class="flex">
2
									<div class="div1">
3
									Contenu 1
4
									</div>
5
									<div class="div2">
6
									Contenu 2
7
									</div>
8
									<div class="div3">
9
									Contenu 3
10
									</div>
11
									</div>
1
div.flex {
2
									display: flex;
3
									}
4
									.div1{
5
									flex: 100px 1 3;
6
									}
7
									.div2{
8
									flex: 100px 2 2;
9
									}
10
									.div3{
11
									flex: 100px 3 1;
12
									}

Les éléments étant flexibles, ils ont une taille de base, grossissent et rétrécissent pour occuper leur conteneur.

Contenu 1
Contenu 2
Contenu 3
Flexibilité : flex