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

Posted 2023-03-05

【中文标题】包装的弹性行项目从顶部开始[重复]

【英文标题】：Wrapped flex row items start at top [duplicate]

【发布时间】：2018-07-29 20:06:13

【问题描述】：

在尝试回答 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 是否可以处理这个问题会很有趣，因为我仍在尝试了解它的复杂性

【问题讨论】：

相关（可能是一个规范的欺骗目标，但我没有花很多时间处理关于 SO 的 flexbox 问题）***.com/a/34611670/2756409

如果您有任何机会没有在css 附近见过 Michael_B，并且您仍然需要 flexbox 方面的帮助，请务必花一些时间查看 his answers 的相关主题.他也很好地涵盖了 CSS 网格布局。

【参考方案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>

【讨论】：

啊，很好，知道这会很简单。对齐项目和对齐内容有什么区别？

@Pete What's the difference between align-content and align-items?

完美，谢谢@TylerH