Flexbox Вертикальное выравнивание ребенка сверху, центрирования другой

Question

я получил следующую разметку:

.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>

Unfortunatly второй заголовок не выровнять вертикально вверх. Есть ли способ архивировать это с помощью flexbox? Мне нужно, чтобы «.header» был выровнен сверху и «.content», чтобы быть центрированным в остальной части окна.

Поздравления!

Answer 1

Нет, не совсем, не без другой обертки, которая представляет собой гибкий контейнер.

Как Flexbox является, в определенной степени основан на manipulting полях, не существует никакого метода (AFAIK, хотя мне было бы интересно узнать, если есть) в justify-content: center, а затем align-self дочерний элемент в другом месте кроме центра.

Я бы с чем-то вроде этого: Добавить обертку в «содержание» DIV, дайте ему flex:1, чтобы заполнить оставшееся пространство под заголовком, а затем сделать эту обертку display:flex с justify-content:center.

Это кажется наиболее логичным методу

.col { 
 
    height: 150px; 
 
    width: 80%; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.header { 
 
    background: lightblue; 
 
} 
 
.content { 
 
    background: orange; 
 
} 
 
.flexy { 
 
    flex: 1; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: center; 
 
    background: plum; 
 
}

<div class="col"> 
 
    <div class="header">Header #2</div> 
 
    <div class="flexy"> 
 
    <div class="content">Lorem Ipsum 
 
     <br />Dolor</div> 
 
    </div> 
 
</div>

Codepen Demo

Answer 2

Flexbox открывает все виды возможностей с margin: auto; это один из них. Установка margin на auto вдоль оси гибкости (вертикальная в этом случае) поглотит любое дополнительное пространство, прежде чем делить его между элементами гибкости. Наконец, можно вертикально сосредоточить материал, не создавая суп-суп.

.row { 
 
    display: flex; 
 
    align-items: stretch; 
 
    
 
    margin: -16px; 
 
    background: #ddd; 
 
} 
 

 
.row .col { 
 
    display: flex; 
 
    flex-direction: column; 
 
    
 
    flex: 1; 
 
    
 
    margin: 16px; 
 
    background: #fff; 
 
} 
 

 
.header, .content, .footer { 
 
    padding: 16px; 
 
    
 
    background: red; 
 
} 
 

 
.content { 
 
    margin-top: auto; 
 
    margin-bottom: auto; 
 
}

<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>