Что такое 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 можно подчеркнуть в этой статье.