有沒有辦法用flexbox做到這一點？

Question

我的主要<div>有一個固定的高度，但是當我嘗試使用box-orient: horizontal就可以了，它們仍然保持在第一個<div>以上，即使有溢出攻擊。

我被卡住了。這正是我需要的：

和驗證碼：

<style> 
.box { 
    outline: 1px solid red; 
    width: 1000px; 
    height: 450px; 
    overflow: hidden; 
    display: box; 
    box-pack: center; 
    box-align: center; 
    box-orient:vertical; 
} 

.boxitem { 
    width:150px; 
    height:200px; 
    background:#ccc; 
} 
</style> 

<div class="box"> 
    <div id="box1" class="boxitem">flexbox item 1</div> 
    <div id="box2" class="boxitem">flexbox item 2</div> 
    <div id="box3" class="boxitem">flexbox item 3</div> 
</div> 

Answer 1

您正在使用從2009年的規範，這是贊成這個草案被淘汰性質：http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/。您實際上需要2009規範中的box-orient: vertical，但這仍然不會對您有所幫助，因爲據我所知，沒有人實施box-lines: multiple以啓用換行。如果您只想使用一個柔性容器元素，則需要包裝的功能。

因此，下面的代碼將涵蓋所有支持Flexbox規範的瀏覽器基礎：Opera，Chrome，IE10。

http://jsfiddle.net/FwfDV/

.box { 
    outline: 1px solid red; 
    width: 1000px; 
    height: 450px; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-flow: column wrap; 
    -ms-flex-flow: column wrap; 
    flex-flow: column wrap; 
    -webkit-flex-pack: justify; /* optional */ 
    -ms-flex-pack: justify; /* optional */ 
    -webkit-justify-content: space-between; /* optional */ 
    justify-content: space-between; /* optional */ 
} 
@supports (display: flex) and (flex-wrap: wrap) { 
    .box { 
    display: flex; 
    } 
} 

.boxitem { 
    width: 150px; 
    height: 200px; 
    background: #ccc; 
} 

<div class="box"> 
    <div id="box1" class="boxitem">flexbox item 1</div> 
    <div id="box2" class="boxitem">flexbox item 2</div> 
    <div id="box3" class="boxitem">flexbox item 3</div> 
    <div id="box4" class="boxitem">flexbox item 4</div> 
    <div id="box5" class="boxitem">flexbox item 5</div> 
    <div id="box6" class="boxitem">flexbox item 6</div> 
</div> 

但是，如果你的「boxitem」元素是常規/固定的尺寸是這樣，我建議使用CSS列，而不是，它具有寬一點支持，幾乎可以做同樣的工作。