Флексбокс, часть 1 / Выравнивание строк флекс-контейнера, align-content [15/31]
×

Выравнивание строк флекс-контейнера, align-content [15/31]

Вспомним свойство justify-content, которое управляет распределением флекс-элементов вдоль главной оси.

Есть очень похожее свойство align-content, которое управляет выравниванием рядов флекс-элементов вдоль поперечной оси. У этих свойств почти одинаковые значения:

  • flex-start,

  • flex-end,

  • center,

  • space-between,

  • space-around,

  • и stretch, которое есть у align-content, но нет у justify-content, и является значением по умолчанию.

Свойство align-content связано и со свойством align-items, которое управляет выравниванием флекс-элементов вдоль поперечной оси.

В чём разница между align-content и align-items, когда работает одно, а когда работает другое? Вот ответы:

  • Если есть только один ряд флекс-элементов, то работает align-items.

  • Если есть несколько рядов, то работает align-content.

  • Подчеркнём, что align-content влияет на ряды, а не на отдельные элементы.

В последней версии спецификации это поведение изменилось: теперь правильно, когда align-content выравнивает элементы в многострочном флекс-контейнере, даже если строка в контейнере единственная. Это изменение на момент окончания 2015 года применено только в браузерах Safari и Edge.


Выполнить задание
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Выравнивание строк флекс-контейнера, align-content</title> <base href="/assets/course96/"> <link href="style.css" rel="stylesheet"> <link href="course.css" rel="stylesheet"> </head> <body class="house"> <div class="room room-1"> <div class="rug simeon"></div> <div class="rug rudolf"></div> <div class="rug keks"></div> <div class="rug massimo"></div> </div> <div class="room room-2"> <div class="rug simeon"></div> <div class="rug rudolf"></div> <div class="rug keks"></div> <div class="rug massimo"></div> </div> </body> </html>
.room { display: flex; height: 150px; flex-wrap: wrap; } .rug { width: 80px; min-height: 20px; } .room-1 { align-items: stretch; align-content: flex-end; } .room-2 { align-items: stretch; align-content: flex-start; }
HTML Academy
  1. Для .room-1 задайте align-items в начале поперечной оси,
  2. а для .room-2align-items в конце поперечной оси.
  3. Затем увеличьте ширину коврика .rug до 120px, чтобы в блоках стало два ряда элементов.

Смотрите, как выравнивание рядов переопределило выравнивание элементов.

Теория Проверить Следующее задание

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.