Flexbox: знакомство со свойством гибкого контейнера

Прежде чем прыгать с места в карьер, как это принято у веб-дизайнеров, необходимо познакомиться с теорией, но это скучно и мало кому интересно, поэтому зачастую к теории появляется интерес гораздо позже, когда мы всё испытали, наступили на все возможные грабли и совершили все возможные ошибки. Частенько сами определения очень долго остаются ничего не значащими словесными сочетаниями потому только, что у нас не было времени или желания вникнуть в суть; это зачастую приводит к пробелам в знаниях свойств вещей и, как следствие, ошибкам в работе. Данный феномен очень часто встречается в наше время, когда технологии постоянно изменяются и нет никакой физической возможности за всем угнаться и всё понять.

Я решил вспомнить про азы современной разметки, захотел заново познакомиться с «flexbox», узнать, почему такой контейнер называется гибким, посмотреть на его основные свойства: способы распределения его прямых потомков; поэкспериментировать с flex-direction и flex-wrap.

Flexbox является блочной моделью CSS, предназначенной для распределения и выравнивания блоков в условиях изменения размеров экрана. Проще говоря, «flexbox» упрощает разработку динамических макетов сайтов. Он обладает способностью изменять величину дочерних элементов, подгоняя их под необходимый размер, чтобы заполнить пространство как можно лучше или так, как того требует дизайн.

Хотя утверждается, что «flexbox» проще, чем «grid» (сетки), поэтому-де он годен прежде всего для небольших частей макета, но на самом деле это не соответствует практике использования flexbox, всё зависит не от масштабов, а от назначения блока с flex-элементами. Здесь возникает множество вопросов, первые из них будут звучать примерно следующим образом: почему это свойство называется «гибким»? и чем оно отличается от «сетки»? Попробую же разобраться, в чём заключается эта гибкость, буду двигаться от простого к сложному и для начала посмотрю на основные возможности flexbox.

Гибкий контейнер

Создам простой контейнер и наполню его какими-нибудь однотипными элементами. Это может быть список <ul> с несколькими дочерними <li>, наполненными любым содержанием, или простой контейнер с такими же контейнерами внутри и так далее. У меня получился такой код HTML:

<content class="flex-box">
      <div class="flex_1">
        <p>Lorem ipsum dolor sit amet, <br>
          consectetur adipiscing elit.</p>
      </div>
      <div class="flex_2">
        <p>Lorem ipsum dolor sit amet, <br>
          consectetur adipiscing elit.</p>
      </div>
      <div class="flex_3">
        <p>Lorem ipsum dolor sit amet, <br>
          consectetur adipiscing elit.</p>
      </div>
    </content>

После оформления добавлю свойство flex главному боксу:

.flex-box {
	display: flex;
}

Внутренние элементы выстроились в одну линию.

Теперь можно заняться выравниванием дочерних элементов, чтобы понять основные принципы, по которым работает «flexbox». У данного свойства есть два главных ориентира — это горизонтальная и вертикальная оси, по отношению к которым и выравниваются его прямые потомки.

Для выравнивания существует команда flex-direction, она принимает значения:

row: слева направо (по умолчанию)
row-reverse: справа налево, в обратном порядке
column: сверху вниз
column-reverse: снизу вверх, в обратном порядке, по аналогии с row-reverse

Однако если количество вложенных потомков велико, одного flex-direction будет маловато, потому что все они будут стремиться выстроиться в одну линию за счёт того, что будут сжиматься сами, что приведёт к их сильному уменьшению и выпаданию их содержимого за границы. Хотя, стоит заметить, всё зависит от того, какой результат мне нужен и есть ли вообще содержимое (бывает, что таким образом распределяются элементы декора). Если оно всё же имеется, на экранах моих гаджетов будет кошмар. Попробую представить, что мне нужно равномерно распределить объекты в заданной области, высота которой не определена, и моя задача — уместить все дочерние объекты, сохранив их в первозданном виде. Для этого существует команда flex-wrap, которая принимает следующие значения:

nowrap: в одной строке (по умолчанию)
wrap: при уменьшении экрана — сверху вниз
wrap-reverse: обратное направление

Добавлю ещё несколько вложенных объектов в мой «flexbox» и к своему коду CSS добавлю вышеперечисленные команды:

.flex-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

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

Тут же стоит добавить, что больше нет необходимости прописывать эти свойства по отдельности, для этого была придумана команда flex-flow, обобщающая их, поэтому приведённый выше код CSS можно немножко упростить:

.flex-box {
	display: flex;
	flex-flow: row wrap;
}

Итак, я выяснил, почему собственного контейнер называется гибким и узнал его основные свойства, позже попробую рассмотреть способы выравнивания вложенных элементов во flexbox, ведь далеко не всеми приходилось пользоваться, может быть, что-то прошло мимо меня и я испытываю затруднения там, где всё просто и даётся двумя строчками кода. Очень часто так и бывает…