html - 使用 Flexbox 实现等高列

Question

我正在尝试构建一个具有两个独立内容组的布局:一个位于左侧和右侧，目前具有固定宽度(20%/80%)。在每一侧，我都尝试使用 flexbox 来排列内容:左面板带有 flex-direction: column ，右面板带有 flex-direction: row wrap 。每面的内容数量可以灵活调整。内容较少的面板应与另一“较高”一侧的高度相匹配。

到目前为止，我已经能够实现基本布局，如jsfiddle所示。然而，我的问题是，即使我将高度设置为 100%，我也无法使“较短”面板填充高度。在给定的示例中，左侧面板的“C”div 和右侧面板的“Box7”div 之间有一个空白区域。 html/css 代码如下所示。

我该如何解决这个问题或者是否有更好更简单的布局解决方案？任何帮助将不胜感激。

HTML

<div class='top'>
    <div class='left'>
        <div class='litem'>A</div>
        <div class='litem'>B</div>
        <div class='litem'>C</div>
    </div>
    <div class='right'>
        <div class='ritem'>Box 1</div>
        <div class='ritem'>Box 2</div>
        <div class='ritem'>Box 3</div>
        <div class='ritem'>Box 4</div>
        <div class='ritem'>Box 5</div>
        <div class='ritem'>Box 6</div>
        <div class='ritem'>Box 7</div>
    </div>
</div>

CSS

* { outline: 1px solid Grey; }

html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: Cornsilk;
}

.top {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.left {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    width: 20%;
    height: 100%;
}

.right {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80%;
    height: 100%;
}

.litem, .ritem {
    margin: 0;
    padding: 0;
}

.litem { height: 50%; }
.ritem { height: 50%; width: 33.3%;}

.litem:nth-child(1) { background-color: Cyan; }
.litem:nth-child(2) { background-color: DarkCyan; }
.litem:nth-child(3) { background-color: DarkSeaGreen; }

Answer 1

当您将 height: 100% 应用于 html 和 body 时，您将子元素的增长限制为屏幕的 100% .

在您的代码中，您的 .left flex 元素确实按照指定拉伸(stretch)到 height: 100%。在 .left 周围添加边框以进行说明:DEMO

如果删除所有固定高度，您将启用 Flex 容器以按照默认设置拉伸(stretch)所有 Flex 元素:align-items:stretch(创建等高列的设置) 。 DEMO

当您将 flex: 1 添加到 .left Flex 元素 (.litem) 时，它们会分配容器中的所有可用空间他们之间均匀。 DEMO .

简而言之，当您使用 height 属性时，您会覆盖 align-items:stretch(等高列的 Flex 设置)。