Reprenons l'écriture avec des pourcentages
body {
display : flex;
flex-flow: row nowrap;
}
p:nth-of-type(2n+1) {//blue
flex : 1 4 100%;
}
p:nth-of-type(2n) {//red
flex : 1 1 50%;
}
Nous allons tenter de comprendre la situation.
→
fichier←
Notons tout d'abord que la propriété nowrap impose que les blocs soient sur une ligne.
body {
...
flex-flow: row nowrap;
}
Notons ensuite que le bloc blue fait 100% et que le bloc Rouge 50%, nous allons donc devoir les réduire.
Réécrivons notre code pour avoir un cas plus simple.
p:nth-of-type(2n+1) {//blue
flex : 1 1 100%;
}
p:nth-of-type(2n) {//red
flex : 1 1 50%;
}
Comme il y a réduction, nous nous intéressons aux valeurs rouge, Chaque bloc va se réduire proportionnellement de la même valeur.
Ramenons les pourcentages à des proportions :
100% -> 2
50% -> 1
Le bloc bleu va donc compter pour 2 sur un total de 3
Le bloc rouge va compter pour 1 sur un total de 3
Ainsi, si le body fait 1000px, nous aurions eu le bloc bleu (100%) à 1000px et le bloc rouge (50%) à 500px. Il y a une réduction de 1000-(1000+500) = 500px.
Cette réduction de 500px va se répartir sur 2/3 pour le bloc bleu et 1/3 pour le bloc rouge.
Nous pouvons appliquer la formule :
nouvelle taille = taille - ( réduction * proportion)
Ainsi, pour le bloc bleu
nouvelle taille = 1000 - ( 500 *2/3 ) = 666
Et, pour le bloc rouge
nouvelle taille = 500 - ( 500 *1/3 ) = 333
Donner une taille au body de 1000px et vérifié le résultat.
←Fichier→
Cas suivant
Modifions le cas précédent en changeant la valeur de réduction du bloc bleu.
p:nth-of-type(2n+1) {//blue
flex : 1 2 100%;
}
p:nth-of-type(2n) {//red
flex : 1 1 50%;
}
Comme il y a réduction, nous nous intéressons aux valeurs rouge, Chaque bloc va se réduire non plus proportionnellement mais le bloc bleue va se réduire de fois plus de la même valeur.
Ramenons les pourcentages à des proportions :
100% -> 2
50% -> 1
En prenant en compte le facteur de réduction.
Le bloc bleu va donc compter pour
2*2
sur un total de (2*
2+1)
Le bloc rouge va compter pour
1 sur un total de (2*
2+1)
Ainsi, si le body fait 1000px, nous aurions eu le bloc bleu (100%) à 1000px et le bloc rouge (50%) à 500px. Il y a une réduction de 1000-(1000+500) = 500px.
Cette réduction de 500px va se répartir sur 4/5 pour le bloc bleu et 1/5 pour le bloc rouge.
Nous pouvons appliquer la formule :
nouvelle taille = taille - ( réduction * proportion)
Ainsi, pour le bloc bleu :
nouvelle taille = 1000 - ( 500 * 4/5 ) = 600
Et, pour le bloc rouge :
nouvelle taille = 500 - ( 500 * 1/5 ) = 400
→fichier←
Finalement pour les valeurs
p:nth-of-type(2n+1) {
flex : 1 4 100%;
}
p:nth-of-type(2n) {
flex : 1 1 50%;
}
Les proportions seraient de 4*2/4*2+1 et de 1/9. Vérifiez avec le premier fichier test.
