如何使弹性项块元素？
如何使弹性项块元素？
提问于 2013-09-13 10:32:03
Flex-box规范3.声明，flex-项不是块容器：
flex项为其内容建立新的格式化上下文。与往常一样，此格式上下文的类型由其“显示”值决定。flex项的计算“显示”是通过应用CSS2.1第9.7章中的表来确定的。然而，flex项是flex级别的框，而不是块级框:它们参与容器的flex格式上下文，而不是块格式上下文。
看看这个小例子( 4.)：
#flex {
height: 200px;
width: 100px;
display: flex;
flex-flow: column;
background-color: red;
}
#flexAuto {
display: block;
position: relative;
flex: auto;
width: 100%;
}
#oneHundredPercent {
height: 100%;
width: 100%;
background-color: green;
}HTML
<div id="flex">
<div id="flexAuto">
<div id="oneHundredPercent"></div>
</div>
</div>我预计#oneHundredPercent会高出200 of，就像其容器#flexAuto的大小一样。但它太高了。实际输出看起来像左边的图片。我希望看到正确的画面：
有什么简单的方法可以让弹性物品再次像盒子一样表现出来吗？
回答 1
Stack Overflow用户
发布于 2013-09-15 15:37:31
嗯，我想外部flex框的子程序通常是一个flex项目，直到您将它的显示模式更改为阻塞为止。
因此，您只需要显式地为FlexAuto (height:100%)声明一个高度。高度将相对于Flexbox容器计算。
然后，最内部的元素将按您的意愿显示。
(顺便说一句，即使flexAuto仍然是一个flex项，您也可能需要设置flex：“拉伸”。)
http://jsfiddle.net/dfrWd/6/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18784154
复制相关文章
相似问题
腾讯云开发者
