2012-12-21 6 views
5

最近私はCSS3フレックスボックスで遊んで始めました。私は多くのリソースを読んで、それを自分で演奏しました。私はを通じて見てきた:私はどのように負フレックスパラメータ作品を理解するように見えることはできませんCSS3フレックスボックスネガティブフレックスはどのように機能しますか?

flex: <positive-flex> <negative-flex> <preferred-size> 

http://www.w3.org/TR/css3-flexbox/

は、具体的に、私は子要素のフレックスプロパティとのトラブルを抱えています。正のフレックスは親要素から子要素に比例して空間を分配するので意味があります。

私が理解しているところから、負のフレックスは、要素が親をオーバーフローするときに要素を縮小すると考えられています。しかし、私はこれを動作させることができませんでした。助けの理解は大いに評価されるでしょう!ここで

は、私がテストしてきたコードです: http://jsfiddle.net/nxzQQ/2/

HTML:

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 

<div id="container"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</body> 
</html> 

CSS:フレキシボックスのオペラからの記事の中で

#container { 
    width: 100%; 
    height: 200px; 

    display: -webkit-flex; 
    display: flex; 

    -webkit-flex-direction: row; 
    flex-direction: row; 
} 

#container > :nth-child(1) { 
    background-color: red; 

    -webkit-flex: 1 0 0px; 
    flex: 1 0 0px; 
} 

#container > :nth-child(2) { 
    background-color: blue; 

    -webkit-flex: 2 0 0px; 
    flex: 2 0 0px; 
} 

#container > :nth-child(3) { 
    background-color: orange; 

    -webkit-flex: 1 0 0px; 
    flex: 1 0 0px; 
} 

答えて

6

、負フレックスは以下のように記述されていますそのようなもの:

#first { 
    flex: 1 1 400px; 
} 

#second { 
    flex: 2 3 600px; 
} 

#third { 
    flex: 1 2 400px; 
} 

負のフレックス値は、その名前にもかかわらず、上記の宣言の2番目の単位なし値である正の値- です。子供が 主軸方向に親コンテナをオーバーフローしたときにのみ、これらは再生されます( )。それらは比例値としても機能しますが、今度は それぞれの子供のサイズが から控除される「オーバーフロー量」(子供が の子供のコンテナのオーバーフロー量)の割合を指定し、全体のサイズを縮小します親のサイズ に等しくなるように、つまりオーバーフローを止めるようにします。

親コンテナが軸 に沿って1100ピクセルであるとします。この場合、上記の子は300 ピクセル(メイン軸に沿って合計1400ピクセルに相当)のピクセルをオーバーフローさせます。それらに設定された負のフレックス値の ので:

  • 最初の子は50個のピクセルであることから削除オーバーフロー量の1/6日になるだろう。したがって、その計算値は350 ピクセルになります。
  • 2番目の子は、それから削除されたオーバーフロー量の3/6を取得します。これは150ピクセルです。したがって、その計算値は 450ピクセルになります。
  • 3番目の子は、それから削除されたオーバーフロー量の2/6を取得します。これは100ピクセルです。したがって、その計算値は300 ピクセルになります。

したがって、負のフレックス値が大きいほど、実際には要素が小さくなります。

出典:http://dev.opera.com/articles/view/flexbox-basics/