項 目 | 説 明 |
---|---|
記述形式 | セレクタ {flex-basis: 値 } |
値 の形式 | width プロパティ の値の形式 |
初 期 値 | auto |
対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
適用可能な要素 | フレキシブル・コンテナ内の子要素(flex items) |
継 承 | しない |
flex-basisプロパティ は, フレキシブル・コンテナ内の子要素の flex-basis,すなわち, 主軸方向サイズの初期値 を指定します。
指定できる値の形式は,width プロパティ のそれと同じです。
なお,フレキシブル・コンテナと行ボックスの配置に関しては,多数の用語 が定義され,用いられておりますので,これらについての知識は必須です。
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
|