CSS Flexbox
1
2
3
4
5
6
7
8
Модуль макета CSS Flexbox
До модуля "Макет Flexbox" було чотири режима макета:
- Блоковий, для розділів на вебсторінці
- Вбудований, для тексту
- Табличний, для даних двомірної таблиці
- Позиціонування, для явного позиціювання елементу
Модуль Flexible Box Layout спрощує розробку гнучкої адаптивної структури макета без використання float або позиціювання.
Підтримка браузерами
Властивості flexbox підтримуються в усіх сучасних браузерах.
| 29.0 | 11.0 | 22.0 | 10 | 48 |
Flexbox елементи
Щоб почати використовувати модель Flexbox, вам необхідно спочатку визначити гнучкий (flex) контейнер.
1
2
3
Елемент вище представляє собою гнучкий контейнер (синя область) з трьома гнучкими елементами.
Приклад
Гнучкий контейнер з трьома гнучкими елементами:
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
Ви дізнаєтесь більше про гнучкі контейнери та гнучкі елементи в наступних розділах на нашому сайті W3Schools українською.
