Cas d'augmentation-
p:nth-of-type(2n+1) {//bleu
flex : 1 1 25%;
}
p:nth-of-type(2n) {//rouge
flex : 1 1 50%;
}
Dans ce cas, la somme des pourcentage est inférieur à 100% (la taille du conteneur), il y a augmentation ; les chiffres rouges sont pris en compte.
Chaque bloc va augmenter proportionnellement de la même valeur.
Ainsi, si le body fait 1000 px, nous aurions eu le bloc bleu (25%) à 250 px et le bloc rouge (50%) à 500 px. Il y a une augmentation de 1000 - ( 250 + 500) = 250 px à répartir.
Cette augmentation de 250 px va se répartir sur 1/1+1 pour le bloc bleu et 1/1+1 pour le bloc rouge.
Nous pouvons appliquer la formule :
nouvelle taille = taille + ( augmentation * proportion)
Ainsi, pour le bloc bleu
nouvelle taille = 250 + ( 250 *1/2 ) = 375
Et, pour le bloc rouge
nouvelle taille = 500 + ( 250 *1/2 ) = 625
Cette augmentation de 250 px va se répartir sur 4/1+4 pour le bloc bleu et 1/1+4 pour le bloc rouge.
Fichier de test
Ainsi, si le body fait 1000 px, nous aurions eu le bloc bleu (25%) à 250 px et le bloc rouge (50%) à 500 px. Il y a une augmentation de 1000 - ( 250 + 500) = 250 px à répartir.
Cette augmentation de 250 px va se répartir sur 1/1+1 pour le bloc bleu et 1/1+1 pour le bloc rouge.
Nous pouvons appliquer la formule :
nouvelle taille = taille + ( augmentation * proportion)
Ainsi, pour le bloc bleu
nouvelle taille = 250 + ( 250 *1/2 ) = 375
Et, pour le bloc rouge
nouvelle taille = 500 + ( 250 *1/2 ) = 625
Autre cas
p:nth-of-type(2n+1) {//bleu
flex : 4 1 25%;
}
p:nth-of-type(2n) {//rouge
flex : 1 1 50%;
}
Dans ce cas encore, la somme des pourcentages est inférieur à 100% (la taille du conteneur), il y a un étirement ; les chiffres rouges sont pris en compte.
Chaque bloc va augmenter proportionnellement de la même valeur.
Ainsi, si le body fait 1000 px, nous aurions eu le bloc bleu (25%) à 250 px et le bloc rouge (50%) à 500 px. Il y a une augmentation de 1000 - ( 250 + 500) = 250 px à répartir.
Nous pouvons appliquer la formule :
nouvelle taille = taille + ( augmentation * proportion)
Ainsi, pour le bloc bleu
nouvelle taille = 250 + ( 250 *4/5 ) = 450
Et, pour le bloc rouge
nouvelle taille = 500 + ( 250 *1/5) = 550