Флексбокс, часть 1 / Остальные значения align-content [18/31]
×

Остальные значения align-content [18/31]

Остальные четыре значения свойства align-content аналогичны значениям свойства justify-content, отличается только ось:

  • flex-start располагает ряды в начале поперечной оси.

  • flex-end располагает ряды в конце поперечной оси.

  • space-between равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступов у краёв нет.

  • space-around равномерно распределяет ряды вдоль поперечной оси, расстояния между соседними рядами одинаковые, отступы у краёв равны половине расстояния между соседними рядами.

Напоследок небольшое резюме.

Свойство align-content — «гибридное». Мы переводим его как «выравнивание», но оно больше похоже на «распределение», justify-content, от которого оно позаимствовало два значения space-between и space-around.

Близость с «распределением» подчёркивает и отсутствие значения baseline — всё-таки свойство работает с рядами, а не с отдельными элементами.

От «выравниваний» же, align-items и align-self, это свойство получило значение по умолчанию stretch и возможность «растягивать» ряды по высоте.


Выполнить задание
<!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"> <div class="rug simeon"></div> <div class="rug rudolf"></div> <div class="rug keks"></div> <div class="rug massimo"></div> <div class="rug marty"></div> <div class="rug blacky"></div> </div> </body> </html>
.room { display: flex; flex-wrap: wrap; align-items: stretch; align-content: stretch; } .rug { width: 180px; min-height: 40px; }
HTML Academy
  1. Для .room задайте выравнивание строк в начале оси,
  2. в конце оси,
  3. равномерное выравнивание без отступов по краям,
  4. равномерное выравнивание с половинными отступами по краям.
Теория Проверить Следующее задание
Идёт запись на курс Продвинутый HTML и CSS #12, который стартует 18 сентября.

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

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

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

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