CSS3のbox-flexで要素が伸縮する比率を決める

css

今回は、子要素のボックスが伸縮する比率を決める場合の処理をメモ。

ボックスの伸縮する比率とは？

たとえば、子要素のボックスが3つあったとした場合に、基本的には何も指定していなければ、そのボックス内の要素の幅に合わせて左詰めになり、親要素より小さければ右側にスペースが出来る。
下記を見ていただくと分かるが、ボックスを包む親要素に「display:flex-box」を指定しているだけで子要素のボックスには特に何も指定していない。

上記のようにスペースが出来る場合にスペースを埋めるときにそれぞれの子要素のボックスの比率を決めるときに「box-flex」プロパティを使う。

box-flexは数値を指定するのだが、初期値は0で子要素は伸縮しません。

また、勝手な推測ですが伸縮されるボックスの幅は親要素の幅に基づいて自動的に決まるっぽいですね。
例えば下記のように指定しても親要素の幅によって自動的に子要素のボックスの伸縮率も決まる？？

.left{
   box-flex:0;
}

.center{
 box-flex:6;
}

.right{
  box-flex:3;
}

いくつかのパターンを下記に記載しておく。