7

私は最近、CSS3 フレックス ボックスをいじり始めました。多くのリソースを読み、自分でいじりました。私は見てきました：http://www.w3.org/TR/css3-flexbox/

具体的には、子要素の flex プロパティに問題があります:

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

負のフレックス パラメータがどのように機能するのか理解できないようです。正のフレックスは、親要素から子要素に比例してスペースを分配するため、理にかなっています。

私が理解していることから、ネガティブフレックスは、要素が親をオーバーフローしたときに要素を縮小することになっています。しかし、私はこれを機能させることができませんでした。理解を助けていただければ幸いです。

これが私がテストしたコードです：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;
}
4

1 に答える 1

8

flexbox に関する Opera の記事では、ネガティブ フレックスは次のように説明されています。

#first {
  flex: 1 1 400px;
}

#second {
  flex: 2 3 600px;
}

#third {
  flex: 1 2 400px;
}

flex の負の値は、その名前に反して正の値であり、上記の宣言の 2 番目の単位のない値です。これらは、子が親コンテナから主軸方向にオーバーフローした場合にのみ機能します。これらは比率の値としても機能しますが、今回は、各子のサイズから差し引かれる「オーバーフロー量」(子がコンテナーからオーバーフローする量) の比率を指定して、全体のサイズを親のサイズ — 実際には、オーバーフローを停止します。

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

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

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

ソース: http://dev.opera.com/articles/view/flexbox-basics/

于 2012-12-21T23:48:20.080 に答える