Основи
Перш ніж ми почнемо з опису властивостей flexbox, давайте трохи ознайомимося з цією моделлю. Вона складається з батьківського контейнера, званого flex-контейнером, та його безпосередніми дочірніми елементами, які називаються flex-елементами.
На малюнку вище ви можете побачити властивості та термінологію, що використовуються для опису flex-контейнера та його дочірніх елементів. Для отримання додаткової інформації про їхнє значення читайте офіційну модель від W3C.
Модуль flexbox пройшов через безліч ітерацій та кілька змін синтаксису від початкового проекту у 2009 році, так що для уникнення плутанини та розуміння, ми будемо використовувати синтаксис з останньої рекомендації (жовтень 2017). Якщо вам потрібна підтримка старих браузерів, можете прочитати статтю Кріса Койєра, як це зробити.
>Підтримка браузерами останньої специфікації Flexbox.
| 11 | 13 | 29 | 12.1 | 6.1 | 9 | 28 |
| 4.4 | 28 | 12.1 | 7.1 | 9.2 |
Safari до версії 9 та iOS до версії 9.2 підтримують властивості з префіксом-webkit-.
Докладну підтримку та сумісність браузерів можете переглянути тут.
Використання
Щоб використовувати flexbox, просто встановіть властивість display для батьківського елемента:
.flex-container { display: flex; }Або, якщо ви хочете відобразити його як рядковий елемент, використовуйте наступний код CSS:
.flex-container { display: inline-flex; }Це єдина властивість, яку необхідно встановити для батьківського контейнера, і всі його безпосередні дочірні елементи автоматично стануть flex-елементами.
Існує кілька способів угруповання властивостей flexbox, і Найпростіший спосіб, який я знайшов для розуміння flexbox і його використання полягає в тому, щоб розділити властивості на дві групи: одна для flex-контейнера, а інша для flex-елементів. Далі наведено їх пояснення і як вони впливають на макет візуально.
Пісочниця
Є пісочниця, в якій ви можете пограти з різними flex властивостями і вивчити потужність компонування на flexbox. Комбінуйте кілька властивостей для отримання складних макетів.
Дивись демонстрацію властивостей Flexbox від Димитара (@justd) у CodePen.
Ви також можете отримати вихідний код у GitHub .