用flexbox实现高度相等的列 [英] achieving equal height columns with flexbox

问题描述

我正在尝试构建一个包含两个独立内容组的布局：一个在左侧和右侧，现在固定宽度（20％/ 80％）。在每一方面，我试图通过使用flexbox来安排内容：左面板使用 flex-direction：column ，右面板使用 flex-direction：row包裹。每一方的内容数量可以灵活。内容较少的面板应该与其他较高一侧的高度相匹配。

到目前为止，我能够实现基本布局，如< a href =https://jsfiddle.net/31v8jzu5/ =nofollow> jsfiddle 。然而，我的问题是，我不能让'矮'面板来填充高度，即使我将高度设置为100％。在给出的例子中，左面板的'C'div和右面板的'Box7'div之间有一个空的空间。 html / css代码如下所示。

我该如何解决这个问题，还是有更好的更简单的布局解决方案？

HTML

 < div class = '顶部' > 
< 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'>方块4< / div> 
< div class ='ritem'>方块5< / div> 
< div class ='ritem'> Box 6< / div> 
< div class ='ritem'>方块7< / div> 
< / div> 
< / div> 
  

CSS

  * {outline：1px solid Gray; } 
 
 html {
 margin：0; 
 padding：0; 
宽度：100％; 
身高：100％; 
} 
 
 body {
 margin：0; 
 padding：0; 
宽度：100％; 
身高：100％; 
背景色：Cornsilk; 
} 
 
 .top {
 margin：0; 
 padding：0; 
 display：flex; 
 flex-direction：row; 
宽度：100％; 
身高：100％; 
} 
 
 .left {
 margin：0; 
 padding：0; 
 display：flex; 
 flex-direction：column; 
 width：20％; 
身高：100％; 
} 
 
 .right {
 margin：0; 
 padding：0; 
 display：flex; 
 flex-direction：row; 
 flex-wrap：wrap; 
宽度：80％; 
身高：100％; 
} 
 
 .litem，.ritem {
 margin：0; 
 padding：0; 
} 
 
 .litem {height：50％; } 
 .item {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; } 
  

解决方案

：100％到 html 和 body ，您将子元素的增长限制为在你的代码中，你的 .left flex项目确实延伸到<$ c <100％的屏幕。

$ c> height：100％，如指定。在 .left 周围添加一个边框作为示例： DEMO

如果您删除所有固定高度，您将启用flex容器以按照默认设置拉伸所有flex项目： align-items：stretch （创建相同高度列的设置）。 DEMO

在 .left 弹性项目（ .litem code>），然后他们在容器中均匀分配容器中的所有可用空间。 DEMO 。

<简而言之，当您使用 height 属性时，您可以覆盖 align-items：stretch ，相等高度栏的flex设置。

I am trying to build a layout which has two separate content groups: one on the left side and right side, with fixed width (20%/80%) for now. On each side, I am trying to arrange contents by using flexbox: left panel with flex-direction: column and right panel with flex-direction: row wrap. The number of contents on each side can be flexible. The panel with less contents should match the height of the other, 'taller' side.

So far, I was able to achieve the basic layout, as shown in this jsfiddle. However, my problem is that I cannot make the the 'shorter' panel to fill the height, even though I set the height to be 100%. In the given example, there is an empty space between 'C' div of left panel and 'Box7' div of the right panel. The html/css code is show below.

How could I fix this problem or is there nicer simpler layout solutions? Any help would be appreciated.

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; }

解决方案

When you apply height: 100% to html and body, you limit the growth of the child elements to 100% of the screen.

In your code, your .left flex item is indeed stretching to height: 100%, as specified. Add a border around .left for an illustration: DEMO

If you remove all the fixed heights, you'll enable the flex container to stretch all flex items, per the default setting: align-items: stretch (the setting that creates equal height columns). DEMO

When you add flex: 1 to the .left flex items (.litem), they then distribute all available space in the container evenly among themselves. DEMO.

In a nutshell, when you use the height property you override align-items: stretch, the flex setting for equal height columns.

这篇关于用flexbox实现高度相等的列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！