Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.
А блок kuki имеет высоту, равную высоту 22
align-items: stretch; будет растягивать их по высоте
Выходит, что align-items вообще не будет работать, если в блоке есть текст? С заданной минимальной высотой align-items тоже не работает, а по идее должен (минимальная - 50, а дальше рости сколько хочешь)
corrector25, но ведь align-items работает. Если его убрать, то все блоки, кроме самого первого с длинным текстом, станут высотой 50px, как и задумано. Также можно выровнять блоки со 2-го по 8-й по верху/низу контейнера или по центру.
Вам чего нужно добиться?
g33km, да, вижу. Только хотелось бы, чтобы все работало и без огромного блока текста в первом элементе. Вообщем, чтоб все элементы растянулись с "минимальным" текстом до конца окна браузера. А получается, что все элементы растягиваются по высоте первого элемента
Тогда сам контейнер займет высоту окна браузера и его дочерние элементы растянутся по всей его высоте. Если я все правильно понял, это вам и необходимо.
g33km, нет, не совсем. У меня получилось. Вот https://codepen.io/Eva255/pen/GRoqqqj?editors=1100
Как я понимаю, stretch растягивает элементы на высоту контейнера? Если высота не задана, то align-items вообще не будет работать? Потому как получается, некуда двигаться по поперечной оси, правильно я понимаю?
corrector25, да, stretch растягивает все элементы по высоте контейнера. Если высота не задана, то align-self будет выравнивать и растягивать элементы относительно самого высокого элемента в контейнере. А поскольку в вашем случае все элементы имеют изначально высоту 50px, то и сам контейнер будет иметь высоту 50px, соответственно, align-items никак не будет влиять на расположение или размеры дочерних блоков.
Простой
