Flexbox: назначение, преимущества, недостатки

Что такое Flexbox?

Flexbox — это сокращенный разговорный вариант от CSS Flexible Box Layout Module, который представляет из себя некую спецификации языка разметки веб-страниц CSS призванную сделать управление дочерними и родительскими элементами на веб-страницах более удобным, делая верстку веб-страниц более эффективной и универсальной. Основная задумка flex-вёрстки кроется в придании контейнерам разметки страниц свойств адаптироваться под доступное пространство в зависимости от размеров экрана (дисплея), что делает разметку более гибкой. Отсюда, собственно, и название flexible (в переводе с англ. — гибкий).

Ключевые свойства flexbox?

Flexbox представляет из себя целый модуль свойств с помощью которых можно управлять контейнером и его дочерними элементами. Ключевое свойство display flex | inline-flex; является определяющим flex-контейнер и подключает flex-контекст для всех его дочерних элементов.

Так же для придания контейнеру необходимых свойств используются: flex-direction для задания главной оси (main-axis); flex-wrap для определения многострочности и направления поперечной оси; justify-content определяет выравнивание относительно главной оси; align-content выравнивает сроки на поперечной оси. Более подробно о свойствах Flexbox можно почитать в документации.

Преимущества использования Flexbox

• блоки легко делаются гибкими в зависимости от доступного пространства и свойств;
• широкие возможности для вертикального и горизонтального выравнивания объектов;
• возможность гибко управлять расположением объектов без изменения их порядка в html коде;
• адаптация для языков с написанием с права на лево позволит автоматически располагать элементы в правильном порядке;
• изучение свойств Flexbox не занимает много времени, что позволяет быстро приступить к его использованию на практике.

Больше информации о Flexbox можно подчеркнуть в этой статье.