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