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 на русском.
