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

Pour plus d'informations sur les subtilités de la flexibilité des éléments suivez ce lien --> Layout sur 12 colonnes avec Flexbox