HTML5 & CSS3 リファレンス - flex プロパティ（ボックス内子要素のフレキシビリティの一括指定）

CSS3: flex プロパティ - ボックス内子要素のフレキシビリティの一括指定

■ 概要

項　　目	説　　明
記述形式	セレクタ {flex: 値 }
値の形式	none \| [ flex-grow flex-shrink flex-basis ]
初期値	各プロパティの初期値
対応ブラウザー	C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素	フレキシブル・コンテナ内の子要素（flex items）
継　　承	しない

■ 解説

flex プロパティ は，フレキシブル・コンテナ内子要素の フレキシビリティの一括指定 を指定します。

指定できる値の形式は，以下のとおりです。

値	説　　明
flex-grow	余白を埋める際の要素の伸長率を指定します。省略した場合には 1 になります。
flex-shrink	はみ出した状態から収めるための要素の圧縮率を指定します。省略した場合には 1 になります。
flex-basis	要素の主軸方向の初期サイズを指定します。省略した場合には 0 になります。
none	"0 0 auto" を指定した場合と同じになります。

値の指定方法の詳細は，各プロパティの説明を参照してください。

なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語が定義され，用いられておりますので，これらについての知識は必須です。

■ 使用例（ flex プロパティの利用）

次の例では，"fwrapp1"クラスの <div>要素では，"width: 600px;" が指定されています。また，これに含まれる div1aクラス～ div4aクラスの４つの要素の初期サイズの合計は，200px + 100px + 150px + 0px = 450px ですので，150px の余白ができます（２番目の "fwrapp1"クラスの要素の表示を参照）。

この余白 150px について，div1aクラス～ div4aクラスの伸長率は，それぞれ，1, 2, 3, 3 となっていますので，div1aクラス要素の伸長幅を x [px] としますと，1x + 2x + 3x + 3x = 9x = 150 [px] から，x = 50/3 = 16.66... [px] となります。　したがって，div2aクラスの要素の伸長幅は，2x = 100/3 = 33.33... [px]，また，div3aクラスとdiv4aクラスの２つの要素の伸長幅は，それぞれ，3x = 50 [px] と計算できます。　当然ながら，伸長幅 は整数にする必要がありますので，x → 17px，2x → 33px になります。（３番目の "fwrapp1"クラスの要素の表示を参照）

HTMLソース
CSS <head> ～ </head>	<style type="text/css" media="screen, handheld, print, tv" > <!-- .bc1 {background-color: green; } .bc2 {background-color: maroon; } .bc3 {background-color: blue; } .bc4 {background-color: red; } div.fwrapp1 { display: flex; flex-wrap: nowrap; margin: 10px; width: 600px; color: #ffffff; padding: 0px; border-style: none; } div.fwrapp1 div { height: 65px; font-size: 20px; text-align: center; padding-top: 35px; background-color: #cfcfcf; border-style: none; } .div1a { flex: 200px; } .div2a { flex: 2 100px; } .div3a { flex: 3 3 150px; } .div4a { flex: 3 0px; } .div1b { flex: 0 200px; } .div2b { flex: 0 100px; } .div3b { flex: 0 150px; } .div4b { flex: 0 0px; width: 0;} .div1c { flex: 0 217px; } .div2c { flex: 0 133px; } .div3c { flex: 0 200px; } .div4c { flex: 0 50px; } --> </style>
HTML <body> ～ </body>	<div class="fwrapp1"> <div class="bc1 div1a">flex: 200px;</div> <div class="bc2 div2a">flex: 2 100px;</div> <div class="bc3 div3a">flex: 3 3 150px;</div> <div class="bc4 div4a">flex: 3 0px;</div> </div> <div class="fwrapp1"> <div class="bc1 div1b">flex: 0 200px;</div> <div class="bc2 div2b">flex: 0 100px;</div> <div class="bc3 div3b">flex: 0 150px;</div> <div class="bc4 div4b">flex: 0 0px;</div> </div> <div class="fwrapp1"> <div class="bc1 div1b">flex: 0 217px;</div> <div class="bc2 div2b">flex: 0 133px;</div> <div class="bc3 div3b">flex: 0 200px;</div> <div class="bc4 div4b">flex: 0 50px;</div> </div>

HTMLソース

CSS
<head> ～ </head>

<style type="text/css" media="screen, handheld, print, tv" >
<!--
   .bc1 {background-color: green; }
   .bc2 {background-color: maroon; }
   .bc3 {background-color: blue; }
   .bc4 {background-color: red; }

   div.fwrapp1 {
      display: flex;
      flex-wrap: nowrap;
      margin: 10px;
      width: 600px;
      color: #ffffff;
      padding: 0px;
      border-style: none;
   }
   div.fwrapp1 div {
      height: 65px;
      font-size: 20px;
      text-align: center;
      padding-top: 35px;
      background-color: #cfcfcf;
      border-style: none;
   }

   .div1a { flex: 200px; }
   .div2a { flex: 2 100px; }
   .div3a { flex: 3 3 150px; }
   .div4a { flex: 3 0px; }

   .div1b { flex: 0 200px; }
   .div2b { flex: 0 100px; }
   .div3b { flex: 0 150px; }
   .div4b { flex: 0 0px; width: 0;}

   .div1c { flex: 0 217px; }
   .div2c { flex: 0 133px; }
   .div3c { flex: 0 200px; }
   .div4c { flex: 0 50px; }

-->
</style>

HTML
<body> ～ </body>

<div class="fwrapp1">
   <div class="bc1 div1a">flex: 200px;</div>
   <div class="bc2 div2a">flex: 2 100px;</div>
   <div class="bc3 div3a">flex: 3 3 150px;</div>
   <div class="bc4 div4a">flex: 3 0px;</div>
</div>
<div class="fwrapp1">
   <div class="bc1 div1b">flex: 0 200px;</div>
   <div class="bc2 div2b">flex: 0 100px;</div>
   <div class="bc3 div3b">flex: 0 150px;</div>
   <div class="bc4 div4b">flex: 0 0px;</div>

</div>
<div class="fwrapp1">
   <div class="bc1 div1b">flex: 0 217px;</div>
   <div class="bc2 div2b">flex: 0 133px;</div>
   <div class="bc3 div3b">flex: 0 200px;</div>
   <div class="bc4 div4b">flex: 0 50px;</div>
</div>

ブラウザー表示例　（スケールは表示されません。）
flex: 200px; flex: 2 100px; flex: 3 3 150px; flex: 3 0px; 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px flex: 0 200px; flex: 0 100px; flex: 0 150px; flex: 0 0px; 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px 50px flex: 0 217px; flex: 0 133px; flex: 0 200px; flex: 0 50px;

■ 備考

【参考ページ】