Как много верстальщиков “сломало головы” при позиционировании элементов за все время активного развития сети Интернет!

Задачи из серии “расставить горизонтально три одинаковых (или разных) по ширине блока” или “позиционировать 2 блока по краям родительского, да еще и чтобы контент был центрирован по вертикали” отняли немало времени и нервов многих создателей веб страниц.

С стремительным появлением всевозможных девайсов ситуация только усугубилась. Ведь теперь сайты, созданные лишь для просмотра на десктопе никому не нужны. Страница должна одинаково хорошо отображаться на всех возможных устройствах (ну или как минимум на самых популярных).

Когда-то при верстке веб-страниц вообще использовались таблицы. Поверьте, в Интернете до сих пор полно таких сайтов.

Позиционирование при помощи float имеет немало “подводных камней” и может создать для верстальщика новые проблемы.

Свойство position: absolut также не обладает нужной гибкостью, ведь контент с данным свойством просто “выпадает” из общего потока.

Наверняка многие из вас являются поклонниками технологии Bootstrap, которая действительно легко решает многие проблемы позиционирования блоков (и не только). Однако не всегда есть возможность интегрировать ее в проект.

Сегодня речь пойдет о позиционировании FlexBox.

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

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

Сразу небольшая оговорка. Я не буду рассказывать в этой статье о всех возможностях FlexBox – о них вы узнаете из последующих постов. Здесь мы раз и навсегда разберемся с позиционированием блоков. Вы увидите всю гибкость и бесспорные плюсы такого подхода.

Итак поехали!

Понимание Flex позиционирования

Для понимания Flex позиционирования будем использовать простейшую разметку.

Создадим div, который будет являться контейнером. Внутри него будут еще 4 div, каждый разного цвета. Так вы сможете все увидеть наглядно.

<div class="container">
  <div class="red"></div>
  <div class="green"></div>
  <div class="blue"></div>
  <div class="purple"></div>
</div>

Зададим минимальные стили. Ширину и высоту для контейнера, а также высоту, ширину и цвет для внутренних элементов, чтобы их было видно.

.container {
    height: 200px;
    width: 100%;
}

.red {
    background-color: red;
    width: 100px;
    height: 100px;
}

.green {
    background-color: green;
    width: 100px;
    height: 100px;
}

.blue {
    background-color: blue;
    width: 100px;
    height: 100px;
}

.purple {
    background-color: purple;
    width: 100px;
    height: 100px;
}

Вот, что мы увидим:

Чтобы расставить элементы горизонтально, достаточно div с классом container прописать свойство display: flex.

.container {
    height: 200px;
    width: 100%;
    display: flex;
}

Добавив всего одну строчку кода, мы получим нужный результат.

Расстояние между flex элементами

Мы добились того, что элементы расположились горизонтально и увидели, что сделать это очень просто.

Однако сейчас наши квадратики прилипли друг к другу. Давайте поговорим о распределении элементов и расстоянии между ними.

Для управления расстоянием между элементами используется css свойство justify-content.

Это свойство также применяется к блоку-контейнеру и может принимать следующие значения:

• flex-start – элементы расположены друг за другом начиная с начала контейнера (оно применяется по умолчанию и соответствует виду из изображения выше);
• flex-end – элементы расположены друг за другом и смещены к концу контейнера;
• center – элементы расположены друг за другом и центрированы;
• space-between – элементы равномерно распределены от начала до конца контейнера с отступами между друг-другом;
• space- around – элементы равномерно расположены от начала до конца контейнера с отступами между друг-другом, а также от краев контейнера.

justify-content: flex-end

justify-content: center

justify-content: space-between

justify-content: space-around

Теперь мы умеем распределять элементы по горизонтали.

Однако FlexBox технология также дает возможность выравнивать их и по вертикали.

Чтобы увидеть, как это происходит, зададим нашему контейнеру рамку.

.container {
    height: 200px;
    width: 600px;
    display: flex;
    justify-content: space-around;
    border: 2px solid #ccc;
}

Для выравнивания flex элементов по вертикали используется свойство align-items, которое применяется к контейнеру.

Здесь мы можем задать следующие значения:

• flex-start – значение по умолчанию, элементы выравниваются по верхней границе контейнера;
• flex-end – элементы выравниваются по нижней границе контейнера;
• center – элементы выравниваются по середине контейнера.

align-items: flex-start

align-items: flex-end

align-items: center

Направление flex-элементов

Кроме всего прочего мы можем задать направление для flex-элементов при помощи flex-direction.

Свойство может принимать следующие значения:

• row – слева направо (по умолчанию);
• row-reverse – справа налево;
• column – сверху вниз;
• column-reverse – снизу вверх.

flex-direction: row-reverse;

flex-direction: column

flex-direction: column-reverse

Многострочность flex-контейнера

Сейчас у нас всего 4 элемента в контейнере, но их может быть и больше. FlexBox дает нам возможность определять, как следует поступать с элементами: ужимать их и размещать в одной строке или переносить на следующие строки.

За это отвечает свойство контейнера flex-wrap.

Оно может принимать следующие значения:

• nowrap – элементы в одной строке, если не помещаются в контейнер, то выходят за его границы (стоит по умолчанию);
• wrap – элементы переносятся на следующие строки, если не помещаются в одну;
• wrap-reverse – похоже на wrap, только в обратном направлении.

Чтобы посмотреть, как это работает, давайте добавим в нашу верстку побольше элементов, например, еще 8.

Итак, если мы не зададим свойство flex-wrap или зададим его со значением nowrap, то получим такой результат.

.container {
    height: 200px;
    width: 600px;
    display: flex;
    justify-content: space-around;
    border: 2px solid #ccc;
    flex-wrap: nowrap;
}

flex-wrap: nowrap;

При значении flex-wrap: wrap увидим следующую картину:

flex-wrap: wrap;

Если зададим flex-wrap: wrap-reverse, то получим вот что:

flex-wrap: wrap-reverse;

Выравнивание многострочного контента внутри контейнера

Мы можем определять положение многострочного контента внутри контейнера по вертикальной оси (если элементы расположены горизонтально).

Например, можно позиционировать его вверху, внизу, в середине, по всему контейнеру (первая и последняя строки прижаты к краям), по всему контейнеру (с равным расстоянием между строками и краями), а также растягивая элементы по всей возможной области (если элементам не задана высота).

Отвечает за такое выравнивание свойство align-content.

Принимает следующие значения:

ачения:

• flex-start  (по умолчанию);
• flex-end
• center
• space-between
• space-around
• stretch (если элементам задана высота, то будет проигнорировано).

Для большей наглядности я увеличу высоту нашего контейнера, а в верстке оставлю 8 элементов.
У контейнера в итоге будут следующие стили:

.container {
    height: 400px;
    width: 600px;
    display: flex;
    border: 2px solid #ccc;
    flex-wrap: wrap;
    align-content:flex-start;
}

Вы можете видеть align-content:flex-start – значение по умолчанию. Давайте менять его и смотреть, что получится:

align-content: flex-start;

align-content:flex-end;

align-content: center;

align-content: space-between

align-content: space-around;

align-content: stretch;

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

В следующей статье я расскажу вам о flex-стилях для самих элементов и тогда вы действительно ощутите всю мощь FlexBox.

Чтобы поскорее к нему привыкнуть, начните использовать его прямо сейчас. Это здорово облегчит вам жизнь )) До связи.