html - 使用 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

您已经使用 display: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