如何防止柔性物品在包裹时拉伸

Question

我正在尝试使用 Flexbox 为我的应用程序创建一个网格系统。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;
}