Два примера вёрстки с помощью флекс бокс

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

Как самый простой пример — меню на флекс. По простому три блока в ряд.

See the Pen
Флекс бокс горизонтальный контейнер by Аарон Интман (@aeafjusm)
on CodePen.

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

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

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

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