Question

http://jsfiddle.net/u2zedzob/12/

<div class="wrapper">
    <div class="main-content"></div>
    <div class="footer"></div>
</div>

*, *:before, *:after {
    box-sizing: border-box;
 }

.wrapper {
    background-color: red;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
}

.main-content {
    height: 100%;
    width: 100%;
    background-color: green;
}

.footer {
    height: 30px;
    width: 100%;
    background-color: blue;
    display: table;
}

在此示例中，页脚的高度为30px，主要内容增长以填充其余空间。完美！

但是，如果我删除了页脚的display: table属性 - 它的高度变为27.266px。通过将页脚的最小高度设置为30px也可以防止这种情况。

我对flex逻辑不太熟悉。为什么会这样？是否有一个更优雅的解决方案，其中页脚的高度将得到尊重？也许我缺少一个flex属性？

Answer 1

使用弹性框模型时，您不需要为应缩放的子元素设置height属性。相反，你会使用例如flex-grow属性。在给定的一个元素应该缩放的情况下，1的值是合适的（因为这里不需要定义比例）。

查看更新后的示例，其中.main-content元素的高度根据可用空间进行缩放，.footer元素的高度由30px正确保留，无需设置display属性：

http://jsfiddle.net/u2zedzob/21/

有关详细信息，请查看本指南：

http://css-tricks.com/snippets/css/a-guide-to-flexbox/

flex-grow属性解释为：

这定义了Flex项目在必要时增长的能力。它   接受作为比例的无单位值。它决定了什么   灵活容器内物品的可用空间量   应该接受。

如果所有项目的flex-grow设置为1，则每个子项将设置为相等   容器内的尺寸。如果你给一个孩子一个   值2，那个孩子占用的空间是它的两倍   其他

除非显示：table，否则不会考虑flex元素的高度？

1 个答案: