CSS3: flex-basis プロパティ - ボックス内の子要素の主軸方向サイズ 

■ 概要

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

■ 解説

flex-basisプロパティ は, フレキシブル・コンテナ内の子要素の flex-basis,すなわち, 主軸方向サイズの初期値 を指定します。

指定できる値の形式は,width プロパティ のそれと同じです。

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

■ 使用例( flex-basis プロパティの利用)

flex プロパティ の使用例とその解説も参考にしてください。

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.fwrapp {
      margin: 10px;
      width: 600px;
      display: flex;
      flex-flow: row nowrap;
      background-color: #f0f0f0;
   }
	
   div.fwrapp div {
            height: 35px; width 100px;
            color: #ffffff;
            font-size: 25px;
            text-align: center;
            padding-top: 10px;
   }

   .fgrow0 { flex-basis: 100px; flex-grow: 0; }
   .fgrow1 { flex-basis: 100px; flex-grow: 1; }
   .fgrow2 { flex-basis: 100px; flex-grow: 2; }
   .fgrow3 { flex-basis: 100px; flex-grow: 3; }

   .div1 { flex-basis: 100px; flex-grow: 0; }
   .div2 { flex-basis: 133px; flex-grow: 0; }
   .div3 { flex-basis: 167px; flex-grow: 0; }
   .div4 { flex-basis: 200px; flex-grow: 0; }

-->
</style>
HTML
<body> ~ </body>
<div class="fwrapp">
   <div class="bc1 fgrow0">1</div>
   <div class="bc2 fgrow0">2</div>
   <div class="bc3 fgrow0">3</div>
   <div class="bc4 fgrow0">4</div>
</div>
<div class="fwrapp">
   <div class="bc1 fgrow0">1</div>
   <div class="bc2 fgrow1">2</div>
   <div class="bc3 fgrow2">3</div>
   <div class="bc4 fgrow3">4</div>
</div>
<div class="fwrapp">
   <div class="bc1 div1">100px</div>
   <div class="bc2 div2">133px</div>
   <div class="bc3 div3">167px</div>
   <div class="bc4 div4">200px</div>
</div>

ブラウザー 表示例
1
2
3
4
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
1
2
3
4
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
50px
100px
133px
167px
200px

■ 備考