Компонування гнучкої рамки CSS

Модуль Компонування гнучкої рамки CSS (також відомий під назвою "флексбокс") визначає рамкову модель CSS, оптимізовану для дизайну користувацьких інтерфейсів та компонування елементів в одному вимірі. При моделі гнучкого компонування, дочірні елементи гнучкого контейнера можуть бути розкладені в будь-якому напрямку, а їх розміри є "гнучкими", можуть або збільшуватися – для заповнення невикористаного простору, або зменшуватися – для запобігання переповнення батьківського елемента. Можна легко керувати як горизонтальним, так і вертикальним вирівнюванням дочірніх елементів.

Компонування гнучкої рамки в дії

В наступному прикладі контейнер отримує display: flex, що означає, що три дочірні елементи стають гнучкими елементами. Значенням justify-content стало space-between, щоб розташувати елементи рівномірно на головній осі. Однакова кількість простору розташовується між всіма елементами, а лівий і правий елементи знаходяться на краях гнучкого контейнера. Також можна спостерігати, що елементи розтягуються вздовж поперечної осі, адже значення align-items – stretch. Елементи розтягуються до висоти гнучкого контейнера, тобто кожен з них стає настільки ж високим, як найвищий елемент.

<div class="box">
  <div>Один</div>
  <div>Два</div>
  <div>Три <br />містить <br />додатковий <br />текст</div>
</div>

body {
  font-family: sans-serif;
}
.box {
  border: 2px dotted rgb(96 139 168);
  display: flex;
  justify-content: space-between;
}
.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: rgb(96 139 168 / 0.2);
  padding: 1em;
}

Довідка

Властивості

Терміни глосарія

Посібники

Базові концепції флексбоксу

Огляд можливостей Флексбоксу

Взаємини між флексбоксом та іншими способами компонування

Порівняння Флексбоксу з іншими способами компонування та іншими специфікаціями CSS

Вирівнювання елементів у гнучкому контейнері

Те, як властивості рамкового вирівнювання працюють зі Флексбоксом.

Упорядкування гнучких елементів

Пояснення різних способів для змінювання порядку й напряму елементів, а також роз'яснення потенційних негативних наслідків цього.

Контроль співвідношень гнучких елементів за головною віссю

Пояснення властивостей flex-grow, flex-shrink і flex-basis.

Освоєння загортання гнучких елементів

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

Типові ситуації для використання флексбоксу

Поширені патерни проєктування, котрі є типовими випадками для використання Флексбоксу.

Компонування CSS – флексбокс

Дізнайтеся, як користуватися для створення макетів у вебі компонуванням флексбоксу.

Рамкове вирівнювання у флексбоксі

Детально описує можливості Рамкового вирівнювання CSS, що є притаманними саме флексбоксу.

Споріднені концепції

Модуль Виведення CSS

Модуль Рамкового вирівнювання CSS

Модуль Розмірів рамок CSS

Специфікації

Специфікація
CSS Flexible Box Layout Module Level 1 (CSS Flexbox 1)

Дивіться також

Помітили помилку на цій сторінці?

Переглянути сирці на GitHub.

Редагувати вміст на GitHub.

Почати обговорення на GitHub стосовно вмісту цієї сторінки.