包裹的弹性行项目从顶部开始

Question

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

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

然而，我无法让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>