Flexibilité
On peut définir la façon dont l'espace va être occupé par chaque élément.
Définition : Taille de base
flex-basis
On peut définir la taille de base des éléments
<div class="flex">
<div class="div1">
Contenu 1
</div>
<div class="div2">
Contenu 2
</div>
<div class="div3">
Contenu 3
</div>
</div>
div.flex {
display: flex;
}
.flex > div{
flex-basis: 100px;
}
Définition : Grossissement
flex-grow
permet de définir la portion de grossissement d'un élément, afin d'occuper l'espace restant.
<div class="flex">
<div class="div1">
Contenu 1
</div>
<div class="div2">
Contenu 2
</div>
<div class="div3">
Contenu 3
</div>
</div>
div.flex {
display: flex;
}
.flex > div{
flex-basis: 100px;
}
.div1{
flex-grow: 1;
}
.div2{
flex-grow: 2;
}
.div3{
flex-grow: 3;
}
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) )
Définition : Rétrécissement
flex-shrink
permet de définir la portion de rétrécissement d'un élément.
<div class="flex">
<div class="div1">
Contenu 1
</div>
<div class="div2">
Contenu 2
</div>
<div class="div3">
Contenu 3
</div>
</div>
div.flex {
display: flex;
}
.flex > div{
flex-basis: 200px;
}
.div1{
flex-shrink: 1;
}
.div2{
flex-shrink: 2;
}
.div3{
flex-shrink: 3;
}
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) )
Définition : Raccorcie
flex
flex est une propriété raccourcie.
flex: basis grow shrink;
<div class="flex">
<div class="div1">
Contenu 1
</div>
<div class="div2">
Contenu 2
</div>
<div class="div3">
Contenu 3
</div>
</div>
div.flex {
display: flex;
}
.div1{
flex: 100px 1 3;
}
.div2{
flex: 100px 2 2;
}
.div3{
flex: 100px 3 1;
}
Les éléments étant flexibles, ils ont une taille de base, grossissent et rétrécissent pour occuper leur conteneur.
Pour plus d'informations sur les subtilités de la flexibilité des éléments suivez ce lien --> Layout sur 12 colonnes avec Flexbox