1

私のメイン<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>
4

1 に答える 1

1

このドラフトを支持して段階的に廃止されている2009仕様のプロパティを使用しています： http ：//www.w3.org/TR/2012/CR-css3-flexbox-20120918/ 。実際には2009年の仕様が必要ですが、私が知る限り、ラッピングを有効にするためにbox-orient: vertical実装した人は誰もいないため、それでも役に立ちません。box-lines: multipleフレックスコンテナ要素を1つだけ使用する場合は、ラップする機能が必要です。

したがって、以下のコードは、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列を使用することをお勧めします。これは、サポートが少し広く、ほぼ同じ仕事をすることができます。

于 2013-03-01T21:32:42.067 に答える