Flexbox用于等高度，但它忽略了网格系统中的列宽度

我有一个网格，在这个例子中有4个网格（宽度：25％）。这很好，但我需要列高度相等。内容将被动态加载，因此我无法设置固定的高度。Flexbox用于等高度，但它忽略了网格系统中的列宽度

我已经实现了flexbox，虽然这解决了高度问题，但似乎忽略了百分比宽度。

下面是我的代码，在这里是对codepen的链接... http://codepen.io/anon/pen/CEHgo

HTML

<div class="row"> 
    <div class="col3"> 
    <div class="box">Lorem ipsum</div> 
    </div> 
    <div class="col3"> 
    <div class="box">Lorem ipsum</div> 
    </div> 
    <div class="col3"> 
    <div class="box">Lorem ipsum</div> 
    </div> 
</div>

CSS

* {box-sizing:border-box} 

.row { 
margin-left: -1%; 
margin-right: -1%; 
margin-bottom: 1em; 
display:flex; 
} 
.row:before,.row:after { 
content: " "; 
display: table; 
} 

.row:after { 
clear: both; 
} 

.col3 { 
position: relative; 
float: left; 
padding-left: 1%; 
padding-right: 1%; 
width:25%; 
display:flex; 
} 

.box { 
background:#ccc; 
padding:15px; 
margin-bottom:15px; 
}

我怎样才能获得相等的高度coloumns同时仍尊重列宽？

在此先感谢

来源

2014-10-02 Adam

加上'柔性包装：包装;''到.row' - http://codepen.io/anon/pen/cjkgw – Anonymous 2014-10-02 11:07:39

感谢这一点，我刚刚发现这一点，只要你说出来！它似乎几乎工作，但是通过这样做，出于某种原因，最上面一行有3个，但最下面一行有4个http://codepen.io/anon/pen/inomL - 它似乎错过了第4列行1 – Adam 2014-10-02 11:09:13

谢谢，它现在正在工作 – Adam 2014-10-02 12:04:25

添加flex-wrap: wrap;到.row并添加width: 0;到.row:before, .row:after修复谷歌浏览器的第4列位置。

的jsfiddle - DEMO

.row { 
    margin-left: -1%; 
    margin-right: -1%; 
    margin-bottom: 1em; 
    display:flex; 
    flex-wrap: wrap; 
} 
.row:before, .row:after { 
    content:" "; 
    display: table; 
    width: 0; /* Fix for Google Chrome */ 
}

来源

2014-10-02 11:19:28 Anonymous

完美谢谢 – Adam 2014-10-02 12:04:45

你的代码可以大大清理。使用flexbox完全消除了对浮动和清除修复的需求。看看下面的代码：

* {box-sizing:border-box} 

.row { 
    margin-left: -1%; 
    margin-right: -1%; 
    margin-bottom: 1em; 
    display:flex; 
    flex-wrap: wrap; 
} 

.col3 { 
    padding-left: 1%; 
    padding-right: 1%; 
    width:25%; 
    display: flex; 
} 

.box { 
    background:#ccc; 
    padding:15px; 
    margin-bottom:15px; 
}

演示：http://codepen.io/anon/pen/yswnG

来源

2014-10-02 12:12:30 jbenjohnson

那么这并不是一个“巨大”的改善。另外那些不支持flexbox的浏览器呢？考虑您使用'flexbox'标记了您的问题，并且您在初始代码中使用了flexbox属性，我假定您正在计划使用它吗？我正在处理的网站无法承担使用flexbox的布局 – Adam 2014-10-02 15:57:57

？ – jbenjohnson 2014-10-02 20:13:57

Flexbox用于等高度，但它忽略了网格系统中的列宽度

回答

相关问题