Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Flexbox
Webdesign

Полное руководство по Flexbox выравниванию

by
Difficulty:IntermediateLength:MediumLanguages:

Russian (Pусский) translation by Anna Goorikova (you can also view the original English article)

Выравнивание, вероятно, самый запутанный аспект flexbox. Модуль макета flexbox имеет несколько свойств выравнивания, которые ведут себя по-разному в разных обстоятельствах, и при их использовании вы не всегда можете понять, что происходит или почему. Однако, если вы знаете, на что обратить внимание, выравнивание не такое сложное, как кажется на первый взгляд. Это руководство поможет вам полностью разобраться в Flexbox выравнивании.

История о двух осях

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

The cross axis is always perpendicular to the main axis
Поперечная ось всегда перпендикулярна основной оси.

Это иерархическое соотношение является основным различием между flexbox и CSS Grid Layout. По структуре CSS grid имеет две неиерархические оси: ось строк и ось столбцов. Это связано с тем, что разработчики веб-стандартов предполагают, что CSS grid будет использоваться в качестве двумерной модели макета. С другой стороны, Flexbox имеет одну основную и одну вторичную ось, поскольку является одномерной моделью макета. Самое классное в flexbox это то, что вы можете определить направление этого одного измерения, установив направление главной оси, поэтому вы можете создавать оба варианта, макеты на основе строк и макеты на основе столбцов.

Чтобы избежать путаницы в свойствах выравнивания, всегда имейте в виду, что когда вы используете flexbox, вы работаете с одномерной моделью. Даже если ваш макет выглядит так, будто он имеет два измерения (т. е. строки и столбцы), flex элементы могут следовать только в одном направлении, вдоль главной оси. Вы можете распределить flex элементы по главной оси и выровнять расстояние между отдельными элементами по поперечной оси.

Начнем с установки основной оси

Направление основной оси определяется свойством flex-direction - существует четыре возможных значения:

  1. flex-direction: row; – основная ось идет слева направо (это значение по умолчанию)
  2. flex-direction: row-reverse; – основная ось идет справа налево
  3. flex-direction: column; – основная ось идет сверху вниз
  4. flex-direction: column-reverse; – основная ось идет снизу вверх

Давайте посмотрим, как это выглядит в браузере. Я использую очень простую HTML-разметку, всего девять элементов, расположенных один над другим:

Внешний div с классом .container будет flex контейнером, а внутренние div-вы с классом .item будут flex элементами.

1. Слева направо: row

Как уже упоминалось, в flex направление по умолчанию - row; если вы ничего не установили, это и будет используемое значение. Как вы можете видеть ниже, я добавила свойства, относящиеся к flexbox, только к flex контейнеру. Flex элементы получили несколько свойств для декорации:

Когда flex-direction установлено как row, основная ось идет горизонтально, слева направо. Следовательно, это и есть направление, вдоль которого расположены flex элементы. Поперечная ось проходит перпендикулярно, сверху вниз, и когда элементы достигают края контейнера, они перестраиваются в этом направлении.

2. Слева направо: row-reverse

Когда flex-direction присваивается значение row-reverse, положение осей остается неизменным, что означает, что основная ось будет проходить горизонтально, а поперечная ось вертикально. Однако, направление строк будет изменено на противоположное: справа налево вдоль основной оси.

Если вы посмотрите на нумерацию flex элементов, вы увидите, что теперь каждая строка пронумерована справа налево, но элементы все еще переходят вертикально вниз.

Если вы также хотите изменить направление поперечной оси, вам нужно использовать значение wrap-reverse для свойства flex-wrap. Посмотрите на отличия:

3. Сверху вниз: column

Когда flex-direction установлено как column, основная и поперечная оси меняют свои позиции. Основная ось будет проходить вертикально (сверху вниз), а поперечная ось будет идти горизонтально (слева направо).

Теперь вы увидите, что нумерация элементов flex идет не в строку, а в столбец. Здесь одномерная природа flexbox, вероятно, наиболее заметна. Элементы будут перестраиваться только в том случае, если контейнеру задана фиксированная высота.

4. Снизу вверх: column-reverse

Надеюсь вы посмотрите следующий пример. Когда flex-direction установлено как column-reverse, основная ось остается вертикальной, а поперечная ось по-прежнему горизонтальной, как мы видели в предыдущем примере. Однако, направление столбца меняется на противоположное, поэтому основная ось идет снизу вверх.

Как вы можете видеть ниже, нумерация элементов flex начинается в левом нижнем углу, перемещаясь вверх и вправо.

Опять же, чтобы изменить направление поперечной оси, вам нужно использовать wrap-reverse для свойства flex-wrap.

Сокращение flex-flow

Свойство flex-flow является сокращением для flex-direction и flex-wrap. Например, вы можете использовать:

вместо:

Свойства выравнивания Flexbox

Выравнивание в Flexbox может быть как по основной, так и по поперечной оси.

Одно из свойств (justify-content) принадлежит главной оси, а остальные три (align-itemsalign-selfalign-content) относятся к поперечной оси.

Как и следовало ожидать, поведение свойств выравнивания зависит от свойства flex-direction. Например, justify-content выравнивает элементы горизонтально, если flex-direction установлено как row или row-revers, а также вертикально, если flex-direction установлено как column или column-revers. Это настоящая красота гибкого контейнера.

Выравнивание вдоль основной оси

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

  1. flex-start - flex элементы расположены вначале основной оси (это значение по умолчанию)
  2. flex-end - flex элементы расположены в конце основной оси
  3. center - flex элементы расположены в центре основной оси
  4. space-between - flex элементы распределены равномерно вдоль основной оси, от flex-start до flex-end
  5. space-around - flex элементы равномерно распределены вдоль основной оси, но отступы половинного размера добавляются с каждого конца

Чтобы правильно использовать свойство justify-content, вам нужно обратить внимание на направление ваших осей. Например, правило justify-content: flex-start; всегда располагает flex элементы в начале основной оси. Слева, когда flex-direction установлено как row, справа - когда установлено как row-revers, сверху - когда установлено как column и снизу - когда установлено как column-revers.

Следующая codepen демонстрация показывает, как различные значения свойства justify-content выравнивают flex элементы, когда свойство flex-direction установлено как row.

Выравнивание вдоль поперечной оси

Время перейти на следующий уровень. Вы можете использовать три свойства CSS для выравнивания элементов вдоль поперечной оси. Два из них (align-items и align-self) предназначены для однострочного выравнивания, а align-content для выравнивания по многострочной линии.

Однострочное выравнивание

Элементы align-items и align-self определяют, как пространство распределяется между элементами flex вдоль поперечной оси. На самом деле, оба делают то же самое, но в то время как align-items выравнивают все элементы внутри flex контейнера, align-self переопределяет выравнивание по умолчанию для отдельных flex элементов.

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

  1. auto - заставляет свойство align-self наследовать значение align-items (по умолчанию для align-self)
  2. flex-start - flex элементы выровнены от начала поперечной оси
  3. flex-end - flex элементы выровнены от конца поперечной оси
  4. center - flex элементы выровнены по центру поперечной оси
  5. baseline - flex элементы выровнены от их базовой линии вверх
  6.  stretch - flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (по умолчанию для align-items)

Codepen ниже показывает, как свойства align-items и align-self ведут себя когда, flex-direction установлено как row. Поперечная ось по умолчанию проходит сверху вниз. Элементы имеют разные внутренние отступы (padding), чтобы изменить их высоты и базовые линии. Например, вы можете увидеть, что значение flex-start выравнивает элементы от начала поперечной оси, тогда как flex-end выравнивает их от конца.

Естественно, когда flex-direction - column или column-revers, вы будете работать с макетом на основе столбцов, свойства align-items и align-self будут выравнивать элементы по горизонтали.

Многострочное выравнивание

Свойство align-content делает возможным многострочное выравнивание вдоль поперечной оси. Оно определяет, как строки flex элементов отступают друг от друга. Свойство align-content не влияет на контейнер с одной строкой flex (например, когда содержимое не переносится). Оно может принимать шесть различных значений:

  1. flex-start - flex элементы выровнены от начала поперечной линии
  2. flex-end - flex элементы выровнены от конца поперечной оси
  3. center - flex элементы выровнены по центру поперечной оси
  4. space-between - flex элементы распределены равномерно вдоль поперечной оси между flex-start и flex-end
  5. space-around - flex элементы распределены равномерно вдоль поперечной оси, но отступы половинного размера добавляются с каждого конца
  6. stretch - flex элементы растянуты вдоль поперечной оси так, чтобы заполнить flex контейнер (это значение по умолчанию)

Ниже вы можете увидеть различные демонстрации в codepen, показывающие, как работают разные значения свойства align-content. Как и в случае с нашими другими демонстрациями, применено направление оси по умолчанию.

Эти первые два примера не имеют однострочного свойства (align-items), поэтому вы заметите, что все элементы растягиваются по умолчанию. В следующем примере мы установим align-items: flex-start; так, что элементы будут выравниваться по направлению к началу поперечной оси, а align-content: flex-end; мы установим так, что содержимое будет выровнено по направлению к концу оси:

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

Заключение

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

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.