В процессе перевода.

Способ CSS раскладки Flexible Box (CSS Flexible Box Layout или Flexbox) — это способ CSS раскладки, означающий блочную модель CSS, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.

Базовый пример

В следующем примере контейнер объявлен как display:flex, таким образом его три потомка становятся флекс-элементами. Свойству justify-content присвоено значение space-between для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением align-items является stretch. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.

 

Reference

CSS Properties

Guides

Using CSS flexible boxes
Step-by-step tutorial about how to build layouts using this feature.
Using flexbox to lay out Web applications
Tutorial explaining how to use flexbox in the specific context of Web applications.

Specifications

Specification Status Comment
CSS Flexible Box Layout Module Кандидат в рекомендации Initial definition.

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support 20.0 (20.0) 21.0-webkit
29.0
10.0-ms
11.0
12.10 6.1-webkit
Feature Firefox Mobile (Gecko) Android IE Phone Opera Mobile Safari Mobile
Basic support (Да) 4.4 11 12.10 7.1-webkit

 

Метки документа и участники

Внесли вклад в эту страницу: mdnwebdocs-bot, idoru, WynnChen
Обновлялась последний раз: mdnwebdocs-bot,