css3_html/css_WEB-ITnose での box-flex の使用

構文:

box-flex：<number>

ここで数値: 浮動小数点数を使用して、オブジェクトによってその親要素に割り当てられる残りのスペースの割合を指定します。
フレックスボックスオブジェクトの子要素が残りのスペースを割り当てる方法を設定または取得します。

htmlコード:

<ul id="box">    <li>a</li>    <li>b</li>    <li>c</li></ul>

cssコード:

#box{display:box;width:240px;height:100px;margin:0;padding:10px;list-style:none;display:-webkit-box;display:-moz-box;display:-ms-box}#box li:nth-child(1){box-flex:1;}#box li:nth-child(2){box-flex:1;}#box li:nth-child(3){box-flex:2;}

上記のコードに-moz-、-webkit-などを追加してください。 box-flex を有効にするには、その親要素の表示を box または inline-box として定義する必要があります

誤解: box-flex は、親要素の残りのスペースのみを動的に割り当てます。親要素。上の例のように、親要素 #box の幅は 240px です。a、b、c の幅がそれぞれ 60、60、120 であると考えるのは間違いです。box-flex は親要素の残りのスペースなので、a、b、cに割り当てるべきものは、コンテンツを除いた残りの幅である必要があります

いわゆる残りのスペースの割り当てを明確にするために、上記の例は少し変更されており、HTMLコードはそのままです変更なし
CSS コード:

#box{display:-webkit-box;display:-moz-box;display:-ms-box;background:#000;width:240px;height:100px;margin:0;padding:10px;list-style:none;vertical-align:top;}.box li{width:50px;padding:7px;}#box li:nth-child(1){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#666;}#box li:nth-child(2){-webkit-box-flex:1;-moz-box-flex:1;-ms-box-flex:1;background:#999;}#box li:nth-child(3){-webkit-box-flex:2;-moz-box-flex:2;-ms-box-flex:2;background:#ccc;}

上記のコードから、a、b、c の幅はそれぞれ 50+7*2=64px であることがわかります。3 つの合計は 192px であるため、残りは 240- 192=48px は親要素の残りのスペースなので、a、b、c はセット 1:1:2 に従って 48px を分配し、a は 12px に分割され、b は 12px に分割され、c は 24px に分割されます。最終的には、a=64+12=76px、b=64+12=76px、c= 64+24=88px

写真に示す互換性: