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弹性项目确实延伸到height: 100%，如指定的那样。在.left周围添加边框以获取插图：DEMO

如果删除所有固定高度，您将根据默认设置启用Flex容器拉伸所有弹性项目：align-items: stretch（创建相等高度列的设置）。 DEMO

将flex: 1添加到.left弹性项目（.litem）时，他们会在容器中均匀分配所有可用空间。 DEMO

简而言之，当您使用覆盖<{em> height的{{1}}属性时，相同高度列的弹性设置。

使用flexbox

1 个答案: