CSS - flex-basis

トップ > CSSリファレンス > flex-basis

概要

属性名 flex-basis
auto | content | <width>
初期値auto
適用可能要素フレックスアイテム
継承継承しない
メディアvisual
アニメーション可能(<width>の場合)

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS3112021(-webkit)
29
15(-webkit)
17
6.1(-webkit)
9

説明

フレックスアイテムの横幅(高さ)を指定します。flex-direction が row や row-reverse の場合は横幅、column や column-reverse の場合は高さを示す属性となります。フレキシブルボックスについての概要は flex を参照してください。

説明
auto横幅(高さ)を自動的に計算します。
content横幅(高さ)をコンテンツの横幅(高さ)から決定します。
<width>widthheight で使用可能な長さを指定します。

使用例

CSS
.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; }
HTML
<div class="flexbox">
 <div class="boxA">A</div>
 <div class="boxB">B</div>
 <div class="boxC">C</div>
</div>
表示
A
B
C

関連項目

flex-direction, flex-wrap, flex-flow, order, flex, flex-grow, flex-shrink, flex-basis, justify-content, align-items, align-self, align-content

リンク


Copyright (C) 2015 杜甫々
初版:2015年11月22日、最終更新:2015年11月22日
http://www.tohoho-web.com/css/prop/flex-basis.htm