Компонування гнучкої рамки CSS
Модуль Компонування гнучкої рамки CSS (також відомий під назвою "флексбокс") визначає рамкову модель CSS, оптимізовану для дизайну користувацьких інтерфейсів та компонування елементів в одному вимірі. При моделі гнучкого компонування, дочірні елементи гнучкого контейнера можуть бути розкладені в будь-якому напрямку, а їх розміри є "гнучкими", можуть або збільшуватися – для заповнення невикористаного простору, або зменшуватися – для запобігання переповнення батьківського елемента. Можна легко керувати як горизонтальним, так і вертикальним шикуванням дочірніх елементів.
Базовий приклад
В наступному прикладі контейнер отримує display: flex, що означає, що три дочірні елементи стають гнучкими елементами. Значенням justify-content стало space-between, щоб розташувати елементи рівномірно на головній осі. Однакова кількість простору розташовується між всіма елементами, а лівий і правий елементи знаходяться на краях гнучкого контейнера. Також можна спостерігати, що елементи розтягуються вздовж поперечної осі, адже значення align-items – stretch. Елементи розтягуються до висоти гнучкого контейнера, тобто кожен з них стає настільки ж високим, як найвищий елемент.
Довідка
Властивості
Властивості для шикування
Властивості align-content, align-self, align-items і justify-content спершу з'явилися в специфікації Флексбоксу, однак тепер – означені в Рамковому шикуванні. Специфікація Флексбоксу тепер посилається на специфікацію Рамкового шикування щодо актуальних означень. Крім цього, тепер в Рамковому шикуванні означені додаткові властивості шикування.
justify-contentalign-contentalign-itemsalign-selfplace-contentplace-itemsrow-gapcolumn-gapgap
Посібники
- Базові концепції флексбоксу
Огляд можливостей Флексбоксу
- Взаємини між флексбоксом та іншими способами компонування
Порівняння Флексбоксу з іншими способами компонування та іншими специфікаціями CSS
- Шикування елементів у гнучкому контейнері
Те, як властивості Рамкового шикування працюють зі Флексбоксом.
- Упорядкування гнучких елементів
Пояснення різних способів для змінювання порядку й напряму елементів, а також роз'яснення потенційних негативних наслідків цього.
- Контроль співвідношень гнучких елементів за головною віссю
Пояснення властивостей flex-grow, flex-shrink і flex-basis.
- Освоєння загортання гнучких елементів
Про те, як створювати гнучкі контейнери з багатьма рядами й контролювати виведення елементів на цих рядах.
- Типові ситуації для використання флексбоксу
Поширені патерни проєктування, котрі є типовими випадками для використання Флексбоксу.