Выбор ответа Middle Flexbox обновлено
Почему не работает align-content
Вопрос
Разработчик пишет align-content: center в flex-контейнере высотой 300px, но элементы не двигаются. Почему?
.box {
display: flex;
height: 300px;
align-content: center;
}
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Контейнер однострочный (nowrap), а align-content двигает только строки. align-content выравнивает набор строк flex-контейнера, а при nowrap строка одна и распределять нечего.
Варианты ответа
align-contentработает только в Grid, во flex-контейнере его нет- Нужно ещё задать
justify-content, без него ось выравнивания не определена - Контейнер однострочный (
nowrap), аalign-contentдвигает только строкиправильный ответ - Высоту контейнера нужно задавать через
min-height, иначе места не будет
Разбор
align-content выравнивает набор строк flex-контейнера, а при nowrap строка одна и распределять нечего. Нужно align-items: center или flex-wrap: wrap. Свойство работает и во flex, и в Grid; justify-content и способ задания высоты на это не влияют.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.