有没有办法用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来启用包装。如果您只想使用一个flex容器元素，则需要能够换行。

因此，下面的代码将涵盖支持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 Columns，它有更广泛的支持，可以做几乎相同的工作。