Question

使用body＆＃39; flex-direction: row;，我希望align-items: stretch;将垂直拉伸子项以填充屏幕高度。我不明白为什么没有发生这种情况。

这是我尝试做的最小例子。我期待蓝色的块能够填满整个绿色的身体。

＆＃13;

body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-content: stretch;
  background-color: green;
}
.flexContainer {
  display: flex;
  background-color: blue;
}

＆＃13;

<body>
  <div class="flexContainer">
    Hello
  </div>
</body>

＆＃13;

https://jsfiddle.net/qc6fu1b3/

Answer 1

它没有发生，因为body的高度是内容的高度。

在代码中查看body周围的红色边框：https://jsfiddle.net/qc6fu1b3/2/

如您所见，align-items: stretch没有空间可供使用。

与宽度不同，默认情况下哪个块元素填充100％，必须定义高度。否则，元素默认为auto - 内容的高度。

当你说：

我期待垂直的子项目填满屏幕高度。

没有理由对CSS默认行为有所期待。如果您希望元素扩展屏幕的高度，请在代码中定义：

＆＃13;

html { height: 100%; }

body {
       height: 100%;
       display: flex;
       flex-direction: row;
       align-items: stretch;
       align-content: stretch;
       background-color: green;
}

.flexContainer {
      display: flex;
      background-color: blue;
}

＆＃13;

<body>
    <div class="flexContainer">Hello</div>
</body>

＆＃13;

Flex项目未填充屏幕高度＆＃34; align-items：stretch＆＃34;

1 个答案: