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