6

最初のリンクは flexbox 2009 モデルです:

http://jsfiddle.net/vLKBV/

<div style="display:-webkit-box;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-box;-webkit-box-align:center;-webkit-box-pack:center;background:#0f0;-webkit-box-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

2 つ目は 2011 年から 2012 年に改訂されたバージョンです。

http://jsfiddle.net/MNRgT/1/

<div style="display:-webkit-flex;height:100%">
<div style="background:#f00;width:50px">
</div>
<div style="display:-webkit-flex;-webkit-align-items:center;-webkit-justify-content:center;background:#0f0;-webkit-flex:1;overflow-Y:scroll">
    <div style="background:#000;width:10px;height:300px">
        HELLO
    </div>
</div>
<div style="background:#f00;width:50px">
</div>

結果を垂直方向にリサイズすると、新しいフレックス モデルでは「HELLO」が消え、下にスクロールすると下部の空白が表示されます。一方、古いフレックス モデルは正しく動作します。

最新の Chrome v26.0.1410.65 でこれを回避する方法はありますか?

4

1 に答える 1

9

残念ながら、2009 年仕様と 2012 年仕様の違いは、プロパティ名の違いだけではありません。不完全なドラフトを実装することは常にギャンブルであるため、新しい仕様に準拠しているブラウザーは正しい動作をするものであると想定する方が常に安全です (それがあなたが望む動作でなくても)。

Flexbox の優れた点は、特定のレイアウトを実現するためのさまざまな方法を提供することです。Flexbox の過小評価されている機能の 1 つは、上マージンと下マージンのautoの値が実際にそのように機能することであり、justify-contents/align-items の代わりにここで必要なものです。

http://codepen.io/cimmanon/pen/DEnHh

html, body {
  background: #000;
  width: 100%;
  height: 100%;
  margin: 0;
}

div.container {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  height: 100%;
}

div.side {
  background: #F00;
  width: 50px;
}

div.center {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  overflow-Y: scroll;
  background: #0f0;
}

div.child {
  margin: auto;
  background: white;
  width: 10em;
}

<div class="container">
  <div class="side"></div>
  <div class="center">
    <div class="child">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta elit vel ante hendrerit facilisis. Curabitur aliquam sollicitudin diam, id posuere elit consectetur nec.
    </div>
  </div>
  <div class="side"></div>
</div>
于 2013-04-21T01:17:32.973 に答える