CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 7 · Application directe du cours

Calcul de flex-grow

Flexbox · niveau 2

Énoncé


*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 16px;
  font-family: system-ui, sans-serif;
}

.rangee {
  display: flex;
  gap: 20px;
  width: 800px;
  background: #dbe4f0;
}

.rangee span {
  color: #fff;
  background: #1f3a68;
}

.a {
  flex: 0 1 200px;
}

.b {
  flex: 1 1 100px;
}

.c {
  flex: 3 1 100px;
}

Calculer la largeur et l'abscisse de A, B et C (le conteneur commence en 16). Que deviennent les largeurs si l'on remplace les trois bases par 0 ?

Corrigé

Espace libre : $800 - (200 + 100 + 100) - 2 \times 20 = 360$ . A a flex-grow: 0 : il garde 200. B et C se partagent 360 en $1 + 3 = 4$ parts de 90.

élément	base	gain	largeur, abscisse
A	200	0	200, en 16
B	100	90	190, en $16 + 200 + 20 = 236$
C	100	270	370, en $236 + 190 + 20 = 446$

Chromium mesure exactement ces valeurs (code/ch7/exo-grow.html). Avec des bases nulles, A, qui ne grandit pas, devrait mesurer 0 ; mais il ne descend pas sous sa taille minimale automatique, la largeur de la lettre « A » (10,47 pixels dans Chromium). B et C se partagent le reste, $800 - 40 - 10, 47 = 749, 53$ , dans le rapport 1 pour 3 : 187,38 et 562,15 (Chromium : 187,39 et 562,16, aux arrondis près).

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →