如何使用css3 flexbox創建多列布局而不垂直擴展？

我玩在Chrome CSS3的Flexbox的（沒有必要擔心跨瀏覽器的這個）。我很難說服它按我喜歡的方式佈置我的內容。下面是我的目標草圖：如何使用css3 flexbox創建多列布局而不垂直擴展？

enter image description here

這是我嘗試的的jsfiddle：http://jsfiddle.net/Yht4V/2/這似乎只是每個.group工作的偉大將擴大其高度，而不是創建多個列。

我使用Flexbox的普遍地在這裏。該body勾畫出垂直，與#content DIV取頁面的剩餘高度。每個.group水平佈局。最後，每個.item是.group垂直包裝內佈置。

不幸的是，通過擴大#content高度，每個.group都會以單列結尾，這會導致垂直滾動條（不需要）。如果我設置每個.group的高度，以一個固定的像素大小，項目突破爲多列，但是這違背了Flexbox的的流動性。下面是它看起來像固定高度：http://jsfiddle.net/Yht4V/3/

那麼，如何才能讓我的#content DIV不垂直擴展，因爲一切與flexboxes管理沒有設置固定的高度？我期待flexbox觸發更多列而不是擴展其父項的高度並導致滾動條。

來源

2012-12-27 Bret Kuhns

如果整個事情是流動的，無論你如何的大/小使窗口？爲什麼項目的固定寬度是200px？任何.group能夠有列還是隻有第一個？是否應該有任何溢出？（如果我爲每個組添加100個項目，該怎麼辦）Flexbox不會像您想要的那樣生成可堆疊列，這不是Flexbox的佈局目標。在你的圖片中獲得你想要的東西很簡單我只是不知道所有的縮放需求，這可能會使得它非常困難或不可能只用CSS。 – skyline3000

@ skyline3000我正在嘗試使用純HTML/CSS的Windows 8「metro」風格設計，因此理想情況下，每個組都會根據需要水平添加列，並導致需要水平滾動條「iff」（所以首先垂直添加元素，然後包裝按列水平）。我可以想象用JS實現這一點，但希望Webkit中只能使用HTML5/CSS3來完成。 –

@ skyline3000直接回答您的問題：是的，無論屏幕的高度/寬度如何（我無法控制屏幕尺寸），它都應該是流暢的。每個項目的設計都是固定的，這對於我的最終實施來說是真實的。也許不是那些確切的尺寸，但仍然是固定的。最後，正如我上面提到的，元素應該垂直填充然後水平溢出。 –

從我見過的用於Flexbox的Chrome和Opera實現中，列的flex-direction需要限制元素的高度，否則它將繼續垂直擴展。它不一定是一個固定值，它可以是一個百分比。

這就是說，你想爲你的.group元素的佈局也可以通過使用CSS列模塊來實現的。元素的流向與flexbox列的方向類似，但只要有足夠的寬度，它就會創建列，而不管文檔有多長。

http://jsfiddle.net/Yht4V/8/（你必須原諒缺乏前綴）

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex-grow: 1; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 
    flex: 1 1 auto; 
} 

#content > .group:first-child { 
    columns: 10em; 
    flex-grow: 2;  
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
    break-inside: avoid; 
} 

#content > .group .item:first-child { 
    margin-top: 0; 
}

把它當作一堆嵌套flexboxes的，這是對親如我能得到它：

http://jsfiddle.net/Yht4V/9/（再次，沒有前綴）

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    display: flex; 
    flex-flow: column nowrap; 
} 

h1 { 
    padding: 1em; 
} 

#content { 
    padding: 10px; 
    background-color: #eee; 
    display: flex; 
    flex: 1 1 auto; 
    height: 100%; 
    width: 100%; 
} 

#content > .group { 
    margin: 10px; 
    padding: 10px; 
    border: 1px solid #cfcfcf; 
    background-color: #ddd; 

    display: flex; 
    flex-flow: column wrap; 
    flex: 1 1 30%; 
    max-height: 100%; 
} 

#content > .group .item { 
    margin: 10px; 
    padding: 10px; 
    background-color: #aaa; 
}

來源

2013-02-23 18:33:13 cimmanon

替換你的CSS如下 - 顯示：-webkit-FLEX ; 至以下 - 顯示：-webkit-box;

這個工作對我非常好:-)

來源

2013-08-11 13:45:01 Deepa

如何使用css3 flexbox創建多列布局而不垂直擴展？

回答

相關問題