Я пытаюсь сосредоточить СОДЕРЖАНИЕ элемента flexbox при использовании justify-content:stretch;
Похоже, что старый трюк с использованием display:table-cell;vertical-align:middle;
не работает в этой ситуации. Что делает?
.flex-container {
display:flex;
align-items:center;
justify-content:stretch;
}
.flex-item {
align-self:stretch;
}
<div class="flex-container">
<div class="flex-item">I want to be vertically centered! But I'm not.</div>
</div>
ПЕРЕД ВАМИ ОТВЕТ: Кажется, у меня много путаницы в том, что я прошу. Я пытаюсь центрировать СОДЕРЖАНИЕ гибкого элемента. При justify-content:stretch
высота элемента будет растягиваться до полной высоты контейнера, но содержимое элемента будет плавать вверх (по крайней мере, в Chrome).
"Картина стоит тысячи слов". (А) это то, что у меня уже есть. (B) - это то, что я хочу.