包装的弹性行项目从顶部开始[重复]

Question

在尝试回答 this question 时，我试图提出一个灵活的解决方案。我能得到的最接近的是：

.container {
  height: 500px;
  width: 500px;
  background-color: red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between;  /* puts spacing between left and right column */
}


.headerTitle {
  width:100%;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width: 249px;
  height: 200px;
  background-color: yellow;
}

.rightSideDiv {
  width: 249px;
  height: 200px;
  border: 4px solid green;
  box-sizing:border-box;     /* need this otherwise border  will take an extra 8px width in some browsers */

}

<aside>
  <div class="container">
    <header class="headerTitle"> Header Title </header>
    <section class="sectionClass"> . </section>
    <div class="rightSideDiv"> </div>
  </div>
</aside>

但是，我无法使下面的 2 个框开始与顶部标题齐平。有没有办法使用 flex 做到这一点？我尝试了align-items 和align-self，但这似乎没有任何作用。

我还尝试使用 flex-grow:1; 向容器添加伪元素，但它没有以所需的方式增长。

看看 flex 是否可以处理这个问题会很有趣，因为我仍在尝试了解它的复杂性

Answer 1

只需将align-content: flex-start 添加到.container div：

.container {
  height: 500px;
  width: 500px;
  background-color: red;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-between; /* puts spacing between left and right column */
  align-content: flex-start;
}

.headerTitle {
  width:100%;
  height: 24px;
  margin: 24px 24px 0;
  padding: 0;
  line-height: 24px;
}

.sectionClass {
  width: 249px;
  height: 200px;
  background-color: yellow;
}

.rightSideDiv {
  width: 249px;
  height: 200px;
  border: 4px solid green;
  box-sizing:border-box; /* need this otherwise border will take an extra 8px width in some browsers */
}

<aside>
  <div class="container">
    <header class="headerTitle"> Header Title </header>
    <section class="sectionClass"> . </section>
    <div class="rightSideDiv"> </div>
  </div>
</aside>