包装时如何防止弹性项目拉伸[重复]

Question

我正在尝试使用 flexbox 为我的应用程序创建一个网格系统。在 flex 容器上使用 flex-wrap: wrap 时遇到问题。

在下面的示例中，是否可以在不指定高度值的情况下防止我的标题向下拉伸一半？我希望标题与其中的内容一样高，而侧边栏和内容可以拉伸。

任何帮助将不胜感激。

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-wrap: wrap;
  height: 100%;
}
.cell1 {
  flex: 1 1 100%;
  background-color: #eee;
}
.cell2 {
  flex: 1 0 25%;
  background-color: #ddd;
}
.cell3 {
  flex: 1 0 75%;
  background-color: #ccc;
}

<div class="container">
  <div class="cell1">
    Header should be collapsed
  </div>
  <div class="cell2">
    Sidebar
  </div>
  <div class="cell3">
    Content
  </div>
</div>

Answer 1

据我所知，align-self: flex-start 应该可以解决您的问题。将您的标头类 CSS 更新为：-

.cell1 {
  flex: 1 1 100%;
  background-color: #eee;
  align-self: flex-start;
}

Answer 2

我认为应该是：

.container {
    display: flex;
    flex-wrap: wrap;
    height: 100%;
    align-items: flex-start;
}
.cell1 {
    flex: 1 1 100%;
    background-color: #eee;
    height: auto;
}
.cell2 {
    flex: 1 0 25%;
    background-color: #ddd;
    height: 100%;
}
.cell3 {
    flex: 1 0 75%;
    background-color: #ccc;
    height: 100%;
}

所以，只需确保将 height: auto 添加到标题中，将 height: 100% 添加到其余部分。这样，第一个元素将适合所有需要的实际高度，其余元素将伸展到容器。