Применить другой поток в том же контейнере с помощью flexbox

Question

Я хотел бы иметь элемент h1 в верхней части контейнера, по центру, с направлением column. Как его выровнять?

CodePen

HTML:

<div class="container"> 
    <h1>Description</h1> 

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 

<figure class="gallery-item"> 
    <span class="helper"></span><img src="http://placehold.it/300x300"> 
    <figcaption class="img-title"> 
    <h5>Image Title</h5> 
    </figcaption> 
</figure> 
</div> 

CSS:

.container { 
    display: flex;  
    flex-direction: row; 
    align-items: center; 
    height: 75vh; 
    background: grey; 
    justify-content: space-around; 
} 

Спасибо!

Answer 1

Вы использовали дисплей: flex, чтобы выровнять ваши элементы, и h1 попал под flex. Вот почему он был выровнен с элементами.

.container { 
    display: flex;  
    flex-direction: row; 
    align-items: center; 
    height: 75vh; 
    justify-content: space-around; 
} 
.wrapper { 
background:grey; 
} 
h1 { 
    display:block; 
    clear:both; 
    text-align:center; 
} 

check solution here