<分区>
<分区>
同时尝试回答 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 是否可以处理这个会很有趣，因为我仍在努力学习它的复杂性
最佳答案
只需将 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>关于css - 包裹的 flex 行元素从顶部开始，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48868699/