如何让 flexbox 填充水平和垂直空间？答案

【问题标题】：How to get flexbox to fill horizontal AND vertical space?如何让 flexbox 填充水平和垂直空间？
【发布时间】：2014-07-28 19:00:05
【问题描述】：

我有这个使用新的 flexbox 的 HTML：

<html>
<head>
    <style>
        body {
            margin: 0
        }

        div#outer-container {
            height: 100%;
        }

        div#inner-container {
            display: flex;
            height: 100%;
            flex-direction: row;
        }

        div #left {flex: 1; background-color: yellow;}
        div #center {flex: 5; background-color: #fdd;}
        div #right {flex: 1; background-color: pink;}
    </style>
</head>
<body>

    <div id="outer-container">
        <div>HEADER</div>
        <div id="inner-container">
            <div id="left"></div>
            <div id="center"></div>
            <div id="right"></div>
        </div>
        <div>FOOTER</div>
    </div>
</body>
</html>

它水平扩展很好，但由于页眉/页脚 DIV，它在垂直方向上超过了 100% 的高度。你怎样才能让它不发生？

【问题讨论】：

标签： flexbox

【解决方案1】：

事实证明 - 将高度设置为 80% 并将页眉/页脚高度设置为 5%。

【讨论】：

【解决方案2】：

或者您可以将外部容器设置为 display: flex，并获得一个垂直的 flexbox 容器，其中包含一个水平的 flex 盒容器。然后你的页脚和页眉可以比固定高度更动态地增长和收缩。

在 Chrome 中测试。

<head>
    <style>
        body {
            margin: 0
        }

        div#outer-container {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: ;
        }

        div#inner-container {
            display: flex;
            flex-direction: row;

            flex-grow: 2;
        }

        div #left {flex: 1; background-color: yellow;}
        div #center {flex: 5; background-color: #fdd;}
        div #right {flex: 1; background-color: pink;}
    </style>
</head>
<body>

    <div id="outer-container">
        <div>HEADER</div>
        <div id="inner-container">
            <div id="left">tet</div>
            <div id="center">tet</div>
            <div id="right">test</div>
        </div>
        <div>FOOTEfeawR</div>
    </div>
</body>
</html>

【讨论】：