包装的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>

然而，我无法使下面的两个方框开始与顶部标题齐平。有没有一种使用flex的方法？我尝试了align items和align self，但似乎没有任何效果。

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

这将是有趣的，看看如果flex可以处理这一点，因为我仍在努力学习它的复杂性




Answer 1

只需将align content:flex start添加到。集装箱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>