Flex项目没有填充屏幕高度，使用“align-items：stretch” [英] Flex item not filling screen height with "align-items: stretch"
问题描述
body 的 flex-direction：row; ，我期待它的 align-items：stretch; 将垂直拉伸子项目以填充屏幕高度。我不明白为什么这种情况不会发生。
这是我正在尝试做的最简单的例子。
body {display：flex; flex-direction：row; align-items：stretch; align-content：stretch; background-color：green;}。flexContainer {display：flex; < body> < div class =flexContainer>您好< / div>< / body>
$ b
https://jsfiddle.net/qc6fu1b3/
解决方案 这不会发生，因为 body 的高度是内容的高度
在代码中查看 body 的红色边框： https ：//jsfiddle.net/qc6fu1b3/2/
如您所见， align-items：stretch
与宽度不同，哪些块元素默认填充100％，必须定义高度。否则，元素默认为 auto –内容的高度。
当你说：
我期待[/ b>
没有理由期望CSS默认行为。如果你想让元素扩大屏幕的高度，那么在你的代码中定义：
html {height：100％; } body {height：100％;显示：flex; flex-direction：row; align-items：stretch; align-content：stretch; background-color：green;}。flexContainer {display：flex; < body> < div class =flexContainer> Hello< / div>< / body>
With body's flex-direction: row;, I am expecting its align-items: stretch; will stretch the child item vertically to fill the screen height. I don't understand why this is not happening.
Here's a minimal example of what I am trying to do. I am expecting the blue block to fill the entire green body.
body {
display: flex;
flex-direction: row;
align-items: stretch;
align-content: stretch;
background-color: green;
}
.flexContainer {
display: flex;
background-color: blue;
}
<body>
<div class="flexContainer">
Hello
</div>
</body>
https://jsfiddle.net/qc6fu1b3/
解决方案 It's not happening because the height of body is the height of the content.
See the red border around body in your code: https://jsfiddle.net/qc6fu1b3/2/
As you can see, align-items: stretch has no space to work.
Unlike width, which block elements fill 100% by default, heights must be defined. Otherwise, elements default to auto – the height of the content.
When you say:
I am expecting [...] the child item vertically to fill the screen height.
There's no reason to expect this with CSS default behavior. If you want the element to expand the height of the screen, then define that in your code:
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;
}
<body>
<div class="flexContainer">Hello</div>
</body>
这篇关于Flex项目没有填充屏幕高度，使用“align-items：stretch”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
