flexbox вертикально выровнять дочернюю вершину, центрировать другую
У меня есть следующая разметка:
.row {
display: flex;
align-items: stretch;
margin: -16px;
background: #ddd;
}
.row .col {
display: flex;
flex-direction: column;
justify-content: center;
flex: 1;
margin: 16px;
background: #fff;
}
.header, .content, .footer {
padding: 16px;
background: red;
}
<div class="row">
<div class="col">
<div class="header">Header #1</div>
<div class="content">Lorem Ipsum<br />Dolor<br />Sit Amet</div>
<div class="footer">Footer</div>
</div>
<div class="col">
<div class="header">Header #2</div>
<div class="content">Lorem Ipsum<br />Dolor</div>
</div>
</div>
К сожалению, второй заголовок не выровнен вертикально вверх. Есть ли способ архивировать это с flexbox? Мне нужно, чтобы ".header" был выровнен по верху, а ".content" был центрирован внутри остальной части окна.
Привет!