有没有办法用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列，而不是，它具有宽一点支持，几乎可以做同样的工作。