包裹的 flex 行项目从顶部开始

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到.containerdiv：

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