将文本与第一个div（三个div）对齐（flexbox）

Question

我试图制作这种布局（我已经拍了照片来解释我想做什么）：

所以我有4个div，我将在其中放入一些文字。我已经使用了flexbox并证明了内容的合理性，但我希望将文字与＃34;最新消息＆＃34;与第一个div对齐（在本例中为Element 1）。

我无法为我的问题考虑一个优雅的解决方案，所以我来这里寻求帮助。

＆＃13;

＆＃13;

.wrapper{
  display: flex;
  justify-content: center;
}
.box{
  height: 200px;
  background-color: red;
  margin: 10px;
  width: 200px;
}

＆＃13;

<p class="section-title">Latest News</p>
<div class="wrapper">
  <div class="box">Element 1</div>
  <div class="box">Element 2</div>
  <div class="box">Element 3</div>
  <div class="box">Element 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

有几种方法可以做到这一点，这取决于box元素的动态性。

适用于 n 框的一个简单解决方案是将节标题包含在第一个框中，并在将position: absolute添加到包装器时为其提供margin-top以为其创建空间标题。

https://codepen.io/anon/pen/MJpOrM

＆＃13;

＆＃13;

.wrapper {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.box {
  height: 200px;
  background-color: red;
  margin: 10px;
  width: 300px;
}

.section-title {
  position: absolute;
  top: 0px;
}

＆＃13;

<div class="wrapper">
  <div class="box">
    <p class="section-title">Latest News</p>
    Element 1
  </div>
  <div class="box">Element 2</div>
  <div class="box">Element 3</div>
  <div class="box">Element 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

考虑到你的盒子有一个固定的宽度，最简单的解决方案是使section-title也是一个固定的宽度：

.section-title {
    width: 1260px; //This is merely 300 * 4 + the margin
    margin: auto;
}

https://codepen.io/anon/pen/BpWmJV