Почему не работает align-items?

Question

[corrector25]

Работает только justify-content
Вот код: https://codepen.io/Eva255/pen/GRoqqqj?editors=1100

P.S. Все height закомментированы

Answer 1

[Сергей Чамкин]

Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
А блок kuki имеет высоту, равную высоту 22
align-items: stretch; будет растягивать их по высоте

Comments

[corrector25]

Выходит, что align-items вообще не будет работать, если в блоке есть текст? С заданной минимальной высотой align-items тоже не работает, а по идее должен (минимальная - 50, а дальше рости сколько хочешь)

[g33km]

corrector25, но ведь align-items работает. Если его убрать, то все блоки, кроме самого первого с длинным текстом, станут высотой 50px, как и задумано. Также можно выровнять блоки со 2-го по 8-й по верху/низу контейнера или по центру.
Вам чего нужно добиться?

[corrector25]

g33km, да, вижу. Только хотелось бы, чтобы все работало и без огромного блока текста в первом элементе. Вообщем, чтоб все элементы растянулись с "минимальным" текстом до конца окна браузера. А получается, что все элементы растягиваются по высоте первого элемента

[g33km]

corrector25, задайте

.kuki {
height: 100vh;
}

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

[corrector25]

g33km, нет, не совсем. У меня получилось. Вот https://codepen.io/Eva255/pen/GRoqqqj?editors=1100
Как я понимаю, stretch растягивает элементы на высоту контейнера? Если высота не задана, то align-items вообще не будет работать? Потому как получается, некуда двигаться по поперечной оси, правильно я понимаю?

[Сергей Чамкин]

corrector25, если ей некуда будет двигаться, то да, изменений не будет

[g33km]

corrector25, да, stretch растягивает все элементы по высоте контейнера. Если высота не задана, то align-self будет выравнивать и растягивать элементы относительно самого высокого элемента в контейнере. А поскольку в вашем случае все элементы имеют изначально высоту 50px, то и сам контейнер будет иметь высоту 50px, соответственно, align-items никак не будет влиять на расположение или размеры дочерних блоков.

[corrector25]

g33km, большое спасибо)