實現與Flexbox的

我試圖建立具有兩個獨立的內容組的佈局等於高度列：一個在左側和右側，具有固定的寬度（20％/ 80％）現在。在各方面，我想安排使用Flexbox的內容：與flex-direction: column，右面板flex-direction: row wrap左側面板。每一方的內容數量可以靈活。內容較少的面板應與另一個「較高」一側的高度相匹配。實現與Flexbox的

到目前爲止，我才得以實現的基本佈局，如本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; }

來源

2016-03-08 Yui

當您申請height: 100%到html和body，你限制孩子元素到屏幕的100％的增長。

在您的代碼中，您的.left flex項目的確按照指定延伸至height: 100%。添加邊框.left了一個例證：DEMO

如果刪除所有的固定高度，您可以啓用柔性容器伸展所有Flex項目，根據默認設置：align-items: stretch（設置創建高度相等列）。 DEMO

當您添加flex: 1到.left柔性物品（.litem），他們再在容器發佈的所有可用空間均勻三者結合起來。 DEMO。

簡而言之，當你使用height屬性，您覆蓋align-items: stretch，同等高度列柔性設置。

來源

2016-03-08 18:27:23

感謝您的偉大的祕訣！有一件事，現在我注意到我無法再控制單個內容框的高度。換句話說，.litem，.ritem {height：50％}不起作用，將所有內容框壓縮到頂部。有關這部分的任何建議？ – Yui

您在'.litem'框中使用的任何類型的「height」值（例如px，em或vh - 但不是百分比）都可以使用。這裏是你的200px高的盒子。等高度列保持不變：https：//jsfiddle.net/31v8jzu5/15/ –

哦，我明白了。那麼，看起來像我沒有辦法自動控制箱體高度以適應屏幕，以便不顯示滾動條？ – Yui

實現與Flexbox的

回答

相關問題