Основы CSS-верстки: как с помощью Flexbox компоновать элементы на странице

Если простыми словами, то Flexbox — это такая структура CSS, которую мы используем для отображения и упорядочивания элементов внутри другого элемента или контейнера.

CSS уже давно стал основой интерфейсной веб-разработки. И теперь он — более сложный и эффективным инструмент, чем когда-либо. Но достижение отзывчивости на веб-странице при работе с несколькими элементами и использовании различных устройств всегда было проблемой. Одно из наиболее популярных ее решений — технология CSS Flexbox, позволяющая разработать довольно сложный дизайн веб-сайта и идеально расположить его элементы.

К примеру, создадим элемент <div> с классом flex-container, а затем поместим в него три элемента <div>:

<div class = "flex-container">
 <div> flex-item1 </div>
 <div> flex-item2 </div>
 <div> flex-item3 </div>
</div>

Теперь добавим несколько свойств CSS, чтобы преобразовать этот блок во Flexbox и немного стилизовать:

.flex-container{
  display: flex;
  background-color: #f7941d;
  margin: 20px;
  justify-content: center;
}
.flex-container > div{
  color: white;
  padding: 40px;
  background-color: #c597ec;
  margin: 10px;
  border: 1px solid grey;
}

Результат:

Разберем все более подробно.

В приведенном выше примере внешняя область оранжевого цвета, которую мы создали с помощью элемента <div>, называется гибким контейнером (flex-контейнером). А внутренние элементы <div> фиолетового цвета называются flex-элементами.

Стоит отметить, что свойство display: flex применяется только к родительским элементам, в этом случае родительский элемент — это наш гибкий оранжевый контейнер. А блоки в этом контейнере — его дочерние элементы.

Почему Flexbox?

• Составляющие flex-контейнера могут легко сжиматься и растягиваться в установленном порядке.
• Довольно просто работать с горизонтальным и вертикальным выравниванием элементов, что особенно полезно при тянущейся резиновой верстке.
• При использования технологии Flex расположение элементов в html-документе не важно.
• Дает возможность автоматического выстраивания блоков, заполнение всего предоставленного контейнера.
• Несложный синтаксис.

Свойства flex-контейнера

Существует шесть основных CSS-свойств для работы с flex-контейнером:

• flex-direction;
• flex-wrap;
• flex-flow;
• justify-content;
• align-items;
• align-content.

Но прежде чем мы рассмотрим каждый более подробно, поговорим об осях, присутствующих во flex-контейнере. Их две: главная (основная) ось по умолчанию располагается горизонтально — слева направо, и распределение flex-элементов, добавляемых в контейнер, происходит вдоль нее. Поперечная ось расположена перпендикулярно основной и служит для выравнивания содержимого контейнера по вертикали.

Flex-direction

Мы уже говорили о направлении главной оси по умолчанию (слева-направо) — это не строгое правило. Направлением можно управлять, то есть переопределять расположение гибких блоков с помощью свойства flex-direction. Оно имеет четыре значения:

1row( значение по умолчанию), построение элементов слева направо:

2row-reverse: при таком значении строка переворачивается и flex-элементы становятся в обратном порядке, теперь уже справа налево:

3column: при таком значении основная ось становится вертикальной, располагая все свои элементы сверху вниз (в столбик):

4column-reverse: переворачивает наш столбик, расположив элементы в обратном направлении:

Flex-wrap

Используя это свойство, не поместившиеся в одну линию элементы можно переместить на следующую строчку. Это полезно применять в адаптивных макетах, когда при изменении размера экрана гибкие элементы автоматически меняют свое положение. По умолчанию для параметра flex-wrap установлено значение nowrap.

Например, создадим шесть flex-элементов внутри нашего контейнера, чтобы посмотреть, как работает этот параметр и выясним, какие значения он может принимать.

1wrap:

Мы видим, что два блока flex-item переместились на строчку ниже, сохранив необходимый интервал.

2nowrap:

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

3wrap-reverse:

Такое значение понадобится, если мы захотим перенести блоки на другую строчку, но в обратном порядке. Так получится зеркальное отражение, прямо как в нашем примере.

Flex-flow

Свойство flex-flow объединяет выше рассмотренные flex-direction и flex-wrap. В нем значение каждого параметра пишется через пробел:

Justify-content

Используя свойство justify-content, мы можем выровнять элементы flexbox по горизонтали. Оно имеет пять основных значений:

1center:

Нетрудно догадаться из названия параметра, что при таком значении свойства justify-content блоки во flex-контейнере выравниваются по центру (центрируются).

2flex-start:

Это значение по умолчанию, при котором элементы контейнера выстраиваются относительно начала главной оси.

3flex-end:

При таком значении все внутренние элементы <div> сдвинутся к концу главной базовой линии контейнера.

4space-between:

Свойство space-between расставит наши блоки в строке на одинаковом расстоянии, при этом первый элемент находится в самом начале строки, а последний — прижимается к концу.

5space-around:

При предоставлении justify-content параметра space-around вокруг элементов образовались одинаковые интервалы. Но тут надо помнить, что у первого элемента левый интервал будет равен х, а правый — 2x. Это получилось, поскольку у следующего за ним элемента также будет интервал x — и поэтому они складываются. То же правило применяется к последнему элементу.

Align-items

Это свойство используется для выравнивания flex-элементов по вертикали и имеет четыре основных значения.

Перед тем как продолжить рассматривать параметры align-items, необходимо добавить высоты нашему контейнеру, чтобы увидеть эффект от применения значений. Рассмотрим их:

1center:

Это значение центрирует наши элементы, как показано на рисунке выше.

2flex-start:

В этом случае блоки выстроились относительно начала поперечной оси.

3flex-end:

А теперь они в конце этой оси.

4stretch:

Этот параметр растягивает блоки на высоту контейнера.

5baseline:

Это свойство влияет только на изменение размера шрифта flex-элементов, как показано изображении выше.

Align-content

Принцип действия свойства align-content такой же, как и у предыдущего, но оно предназначено для блоков с несколькими строчками и не действует в случае, когда элементы находятся в одной строке.

Давайте рассмотрим несколько примеров использования этого свойства. Создадим 12 flex-элементов и сделаем так, чтобы они переносились на другую строку при помощи команды flex-wrap: wrap. А теперь кратко перечислим возможные значения align-content и посмотрим, как они работают:

1space-around:

2space-between:

3center:

4flex-start:

5flex-end:

Свойства flex-элементов

Все вышеперечисленные свойства применяются к flex-контейнеру и не влияют напрямую на элементы (только косвенно). Поэтому давайте рассмотрим несколько свойств flexbox, применяемых к блокам внутри контейнера:

1order:

Свойство order изменяет порядок блоков во flex-контейнере и принимает целочисленное значение, упорядочивая элементы от более низкого к более высокому порядку (меньшее число означает более высокий приоритет).

2flex-grow и flex-shrink:

Все элементы по правилам Flexbox расширяются в одинаковом соотношении и занимают одинаковое пространство в контейнере (равную ширину). Мы изменили это пространство при помощи свойства flex-grow.

Свойство flex-shrink прямо противоположно — оно сжимает необходимый нам блок относительно ширины другого блока.

3flex-basis:

Это значение задает размер для отдельно взятого flex-блока.

4align-self:

Мы используем это свойство, чтобы выровнять flex-элемент внутри контейнера. Но для этого необходимо указать высоту flex-контейнера для того, чтобы увидеть эффект. Ему можно присвоить значения: flex-start, flex-end, center.

Вместо выводов

Мы с вами рассмотрели основные методы работы с флексами. Надо сказать, что эта технология отлично зарекомендовала себя и очень хорошо подходит для верстки веб-компонентов и отдельных частей веб-страниц. Такой способ гораздо удобнее, чем устаревшая верстка при помощи float и таблиц.