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