最近私は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;
}