| 属性名 | flex-basis |
|---|---|
| 値 | auto | content | <width> |
| 初期値 | auto |
| 適用可能要素 | フレックスアイテム |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 可能(<width>の場合) |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
フレックスアイテムの横幅(高さ)を指定します。flex-direction が row や row-reverse の場合は横幅、column や column-reverse の場合は高さを示す属性となります。フレックスボックスについての概要は flex を参照してください。
| 値 | 説明 |
|---|---|
| auto | 横幅(高さ)を自動的に計算します。 |
| content | 横幅(高さ)をコンテンツの横幅(高さ)から決定します。 |
| <width> | width や height で使用可能な長さを指定します。 |
.flexbox {
display: flex;
display: -ms-flexbox;
padding: 10px;
border: 1px solid #999;
background-color: #ddd;
}
.boxA, .boxB, .boxC {
border: 1px solid #999;
text-align: center;
}
.boxA { flex-basis: 100px; background-color: #fcc; }
.boxB { flex-basis: 200px; background-color: #cfc; }
.boxC { flex-basis: 300px; background-color: #ccf; }
<div class="flexbox"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div>