Створення флексбоксів

9 червня 2022 р.837

Ми створимо один флекс-контейнер і вставимо в нього три флекс-елементи. Також побачимо, як можна вплинути на розміри елементів, додавши до них більше вмісту, і погравши з деякими значеннями властивостей.

Почнемо з цього.

<!doctype html>
<title>Приклад</title> <style> .container { display: flex; } 
.red { background: orangered; flex-grow: 1; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
.container > div { font-size: 5vw; padding: .5em; color: white; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3</div>
</div>

У нас є широкий червоний флекс-елемент, за ним йдуть маленький зелений і маленький синій елементи.

От відповідний код з цього прикладу.

.container { display: flex; }

Ми включаємо display: flex, щоб оголосити зовнішній елемент флекс-контейнером. Це все, що потрібно, щоб почати використовувати флексбокс. Тепер всі дочірні елементи цього флекс-контейнера автоматично стають флекс-елементами і, отже, розміщуються з урахуванням моделі флекс-верстки. Але ви, напевно, помітили, що червоний елемент ширший за два інші. Це тому, що ми застосували цей елемент flex-grow: 1. Ось код, який ми використовували для цього.

<code data-language="css">.red { background: orangered; flex-grow: 1; }

Властивість flex-grow встановлює коефіцієнт зростання флекс-елемента, який визначає, наскільки елемент виростатиме щодо інших флекс-елементів (після розподілу вільного простору).

Початкове значення цієї властивості дорівнює нулю, тому у двох інших елементів коефіцієнт зростання дорівнює нулю (оскільки для цих елементів ми не використовували властивість href="/css/flex-grow">flex-grow). Це призводить до того, що червоний флекс-елемент збільшується настільки, наскільки це необхідно, щоб зайняти доступний простір. Два інші елементи стискаються до тих пір, поки їх розмір не буде відповідати їх вмісту, і не більше. за допомогою властивості width? Так, ми могли б це зробити, але в такому разі я не зміг показати вам наступний фрагмент…

<!doctype html>
<title>Приклад</title> <style> .container { display: flex; } 
.red { background: orangered; flex-grow: 1; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; } 
.container > div { font-size: 5vw; padding: .5em; color: white; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3 <p>Флекс-елементи можуть збільшуватися та зменшуватися залежно від їх вмісту.</p>
</div>
</div>

Все, що я зробив, це додав трохи тексту до синього елемента і він розширився, щоб відповідати новому вмісту. Насправді тексту так багато, що червоний елемент повністю стиснувся, щоб відповідати власному вмісту, і не більше.

Ось що я мав на увазі, коли говорив, що коефіцієнт зростання визначає, наскільки елемент зростатиме після розподілу вільного простору. Додавши більше вмісту до синього елемента, ми ефективно видалили доступний вільний простір і червоному елементу нікуди почало зростати.

Висота синього гнучкого елемента також зросла для розміщення нового вмісту. І що важливо, два інші елементи також відповідно збільшили свою висоту. З флексбоксами все це відбувається за замовчуванням, що позбавляє нас необхідності налаштовувати висоту і ширину, щоб всі блоки виглядали однаково. що не потрібно встановлювати ширину флекс-елементів, давайте подивимося, що станеться, якщо ми все-таки встановимо ширину.

<!doctype html>
<title>Приклад</title> <style> .container { display: flex; } 
.red { background: orangered; flex-grow: 1; } 
.green { background: yellowgreen; } 
.blue { background: steelblue; width: 40vw; } 
.container > div { font-size: 5vw; padding: .5em; color: white; }
</style> <div class="container"> <div class="red">1</div> <div class="green">2</div> <div class="blue">3 <p>Флекс-елементи можуть збільшуватися та зменшуватися залежно від їх вмісту.</p>
</div>
</div>

Як очікувалося, ширина синього елемента стала заданою. Але оскільки розмір синього елемента зменшився, червоний елемент знову виріс, але не настільки, щоб зайняти доступний вільний простір. Отже, тепер ми починаємо розуміти, чому це називається гнучкою версткою. Наші флекс-елементи є гнучкими і вони раді пристосуватися до того, що відбувається навколо них.

Ви, напевно, можете собі уявити, як легко зробити наступний крок і створити базовий шаблон для макету веб-сайту. Отже, давайте створимо його прямо зараз. Див. також