Prenons le cas de deux paragraphes contenus dans un bloc (le body).
Et donnons à chaque paragraphe les valeurs de flexibilité suivantes :
body {
display : flex;
flex-flow: row nowrap; //nowrap = une ligne !
}
p:nth-of-type(2n+1) { //bleu
flex : 5 5 400px;
}
p:nth-of-type(2n) { //rouge
flex : 1 1 400px;
}
Le fichier de test ( lien sur le fichier ) permet de faire varier la taille du conteneur pour observer la flexibilité des blocs.
- La place totale du conteneur est < à la somme de la taille de chaque bloc.
- La place totale du conteneur est > à la somme de la taille de chaque bloc.
- Egalité entre le contenu et le contenant
Cas 1 : Conteneur plus petit que le contenu !
Prenons par exemple un conteneur (body) de taille 400px.
Nous sommes dans le cas 1, où la taille du body ne permet pas de placer les deux blocs avec leur taille initiale de 400px.
Il faut donc réduire la taille de chaque bloc.
Valeur de réduction : -400px(taille P1)-400px(taille P2)+400px(taille body) = -400px.
Nous devons réduire les blocs(Pi) de 400px au total.
Les 400px(de chaque bloc) doivent être réduits mais proportionnellement.
Nous prenons le second coefficient de la propriété flex qui indique la valeur de réduction.
Nous sommes dans le cas 1, où la taille du body ne permet pas de placer les deux blocs avec leur taille initiale de 400px.
Il faut donc réduire la taille de chaque bloc.
Valeur de réduction : -400px(taille P1)-400px(taille P2)+400px(taille body) = -400px.
Nous devons réduire les blocs(Pi) de 400px au total.
Les 400px(de chaque bloc) doivent être réduits mais proportionnellement.
Nous prenons le second coefficient de la propriété flex qui indique la valeur de réduction.
p:nth-of-type(2n+1) { //bleu
flex : 5 5 400px;
}
p:nth-of-type(2n) { //rouge
flex : 1 1 400px;
}
Le bloc bleu va se réduire de 5/(5+1) * réduction = 5/6 * 400 = 333.
Sa taille sera donc de 400-333 = 66.
Sa taille sera donc de 400-333 = 66.
Le bloc rouge va se réduire de 1/(1+5) * réduction = 1/6 * 400 = 66.
Sa taille sera de 400-66=334.
Sa taille sera de 400-66=334.
En action :
a l'aide du fichier test, modifier la taille du body à 400px, et vérifier que les valeurs calculées correspondent à la simulation.
Cas 2 : Conteneur plus grand que le contenu !
Prenons par exemple un body de taille 1000px.
Nous sommes dans le cas 2, où la taille du body permet de placer les deux blocs avec leur taille initiale de 400px et de les agrandir.
Valeur de l'augmentation : -400px(taille B1)-400px(taille B2)+1000px(taille body) = +200px.
Il faut donc les augmenter de 200px, mais proportionnellement aux valeurs indiquées par la première valeur de la propriété de flex.
p:nth-of-type(2n+1) { //bleu
flex : 5 5 400px;
}
p:nth-of-type(2n) { //rouge
flex : 1 1 400px;
}
Nous sommes dans le cas 2, où la taille du body permet de placer les deux blocs avec leur taille initiale de 400px et de les agrandir.
Valeur de l'augmentation : -400px(taille B1)-400px(taille B2)+1000px(taille body) = +200px.
Il faut donc les augmenter de 200px, mais proportionnellement aux valeurs indiquées par la première valeur de la propriété de flex.
p:nth-of-type(2n+1) { //bleu
flex : 5 5 400px;
}
p:nth-of-type(2n) { //rouge
flex : 1 1 400px;
}
Le bloc bleu va augmenter de 5/(1+5) * augmentation = 5/6*200 = 166
Sa taille sera donc de 400 + 166 = 566.
Sa taille sera donc de 400 + 166 = 566.
Le bloc rouge va augmenter de 1/(1+5) * augmentation = 1/6*200 = 33
Sa taille sera donc de 400 + 33 = 433.
Sa taille sera donc de 400 + 33 = 433.
Cas 3 : body = 800px
Remarque
si les valeurs de flex sont :p:nth-of-type(2n+1) { //bleu
flex : 5 5;
}
p:nth-of-type(2n) { //rouge
flex : 1 1;
}
Nous aurons simplement à répartir 800px (la taille du body) en 5/5+1 *800px pour le bloc1 et 1/5+1 *800px pour le bloc 2.
