Флекс бокс мощный инструмент вёрстки

С самого начала существования интернета перед любым разработчиком сайта стоял вопрос как быстро и красиво создать страницу сайту. И на сегодняшний день одним из самых мощных инструментов сайта являются флекс боксы. Идея этого инструмента очень проста
Tсть всего два два вида блоков с помощью которых можно сверстать страницу практически любой конфигурации. Это родительский блок — Контейнер(или обертка и дочерние элементы (блоки) элементы внутри него. А правила CSS задаются отдельно для родительского и дочернего блоков.
Задача родительского блока задать направление- горизонтальное или вертикальное расположение между и определить положение (например по центру) дочерних блоков.
Как самый простой пример — меню на флекс. По простому три блока в ряд.

See the Pen m by Аарон Интман (@aeafjusm) on CodePen.light

На что нужно обратить внимание в коде CSS для блока main-menu в этом примере он выполняет роль контейнера display: flex; и justify-content:space-around; Первое правило — «прямой приказ» — отображать этот класс как контейнер флекс, а второе определяет равномерное положение элементов по всей строке.

Когда в коде CSS указывают display:flex; — то как уже говорилось это означает что флекс контейнер будет расположен горизонтальное. Это положение по умолчанию.
Для вертикального расположения контейнера указывают его «направление»flex-direction:column

See the Pen ExgNgga by Аарон Интман (@aeafjusm) on CodePen.light

Это самая первая статья о вёрстке на флекс боксах. В следующей статье расскажу как с помощью этого инструмента сверстать основу блога.

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

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