1

我的 main<div>有一个固定的高度，但是当我尝试使用box-orient: horizontal它时，它们都保持在 first 之上<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>
4

1 回答 1

1

您正在使用 2009 规范中的属性，该规范正在逐步淘汰以支持此草案： http ://www.w3.org/TR/2012/CR-css3-flexbox-20120918/ 。您实际上需要box-orient: vertical2009 规范，但这仍然对您没有帮助，因为据我所知，没有人实现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，它具有更广泛的支持并且可以完成几乎相同的工作。

于 2013-03-01T21:32:42.067 回答