В данной статье мы рассмотрим использование модели CSS Flex Box, предназначенной для дизайна пользовательского интерфейса в браузере. В этой модели дети контейнера flex (гибкий) могут располагаться в любом направлении, адаптируя свои размеры: расти, чтобы занять неиспользуемое место или сжиматься, чтобы предотвратить переполнение родительского элемента. Можно легко перемещать детей по вертикальной и горизонтальной оси. Возможность вложения контейнеров flex друг в друга (по горизонтальной оси внутри вертикальной и наоборот) позволяет создавать макеты в двух измерениях.

В CSS 2.1 есть 4 режима разметки — алгоритма, определяющего размер и позиции элементов на основе их отношений с соседними элементами:

• блочная (block) разметка, спроектированная для документов;
• inline разметка для текста;
• табличная (table) разметка для 2D данных в табличном формате;
• позиционная (positioned) разметка для явного позиционирования элементов без учета других в документе.

Этот модуль предоставляет новый режим разметки flex, спроектированный для сложных приложений и веб-страниц.

Читать дальше →