Flexbox用于相同的高度，但它忽略了网格系统中的列宽 [英] Flexbox used for equal height, however it is ignoring column width in grid system

问题描述

我有一个网格，在这个例子中有4个coloumns（宽度：25％）。这很好，但我需要的列是平等的高度。内容将被动态加载，所以我不能设置一个固定的高度。

我已经实现了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％; 
保证金率：-1％; 
 margin-bottom：1em; 
 display：flex; 
} 
 .row：之前，.row：之后{
 content：; 
 display：table; 
} 
 
 .row：在{
之后：clear：both; 
} 
 
 .col3 {
 position：relative; 
 float：left; 
 padding-left：1％; 
填充权：1％; 
宽度：25％; 
 display：flex; 
} 
 
 .box {
 background：#ccc; 
 padding：15px; 
 margin-bottom：15px; 
 
 
 
 $ b $ p 
 $ b 
如何获得同样高度的颜色，同时还要考虑列的宽度？ p> 
 
 
在此先感谢 
 
解决方案 wrap：wrap; 到 .row 并将 width：0; 添加到 .row：之前，.row：之后修复Google Chrome浏览器的第四列位置。
 
 $ b   JSFiddle  -  DEMO   
  .row {
 margin-left：-1％; 
保证金率：-1％; 
 margin-bottom：1em; 
 display：flex; 
 flex-wrap：wrap; 
} 
 .row：之前，.row：之后{
 content：; 
 display：table; 
 width：0; / *修正Google Chrome * / 
} 
  
 
I have a grid which in this examples has 4 coloumns (width:25%). This is fine however I need the columns to be equal height. The content will be loaded in dynamically so I can't set a fixed height.

I have implemented flexbox and while this solves the height problem, it seems to ignore the percentage widths. 

Below is my code and here is a link to the 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;
}
How can I get equal height coloumns whilst still respecting the column widths?

Thanks in advance
解决方案
Add flex-wrap: wrap; to .row and add width: 0; to the .row:before, .row:after to fix the 4th column position on Google Chrome.

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 */
}


                        
这篇关于Flexbox用于相同的高度，但它忽略了网格系统中的列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！