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

Что такое Flexbox?

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

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

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

лэйоут flexbox

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

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

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

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

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.