ДЗ 10

[AndyAnderyan]

Завдання 1

- Встановіть для елемента blue фактор зростання 3
- Встановіть для елемента green фактор зростання 1

До цих пунктів вже є рішення:

        .item-blue {
            background-color: blue;
            flex-grow: 3;
        }
        .item-orange {
            background-color:orange;  
        }
        .item-green {
            background-color:green;
            flex-grow: 1;
        }

Мабудь ви не зауважили це рішення, та написали z-index замість flex-grow:

Тому у вас flex працював лише тоді, коли було записано:

У випадку, коли записані flex-grow, виходить така картина:

І з цього випливає головний пункт завдання:

- Розрахуйте в пікселях ширину кожного з елементів item-green, item-orange, item-blue

Якщо подивитись в браузері, скільки виходить, та не рахувати. То хочаб зробумійти що собою являє flex-grow. Якщо буквально перекладати - це значить "гнучко рости".

У нас є 3 елементи шириною 100. Всього місця - 700. Тобто є 400 "куди рости". Рахуємо flex-grow суму - 1+0+3=4. кожен елемент буде рости на flex-grow/4 від вільного простору (400).

тобто де

flex-grow: 1 - 1/4 400 + 100 (оригінальна ширина) = 100 + 100 = 200 flex-grow: 0 (не вказано) - 0/4 400 + 100 = 0 + 100 = 100 flex-grow: 3 - 3/4 * 400 + 100 = 300 + 100 = 400

от вони й "гнучко виросли", зайнявши все вільне місце, пропорційно flex-grow

[natalidv25]

Дуже вдячна за детальне пояснення, все виправила)