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用於等高度，但它忽略了網格系統中的列寬度

回答

相關問題