Question

我正在尝试使用flexbox为我的应用程序创建网格系统。在flex容器上使用Instant时遇到麻烦。

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

任何帮助将不胜感激。

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;
}

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％添加到其余页。这样，第一个元素将适合实际所需的所有高度，其余元素将延伸到容器。

包装时如何防止柔韧性物品拉伸

2 个答案: