CSS - flex-basis

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

概要

属性名	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>

関連項目

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

リンク

• http://www.w3.org/TR/css-flexbox-1/#flex-basis-property
• https://developer.mozilla.org/ja/docs/Web/CSS/flex-basis
• http://caniuse.com/#feat=flexbox

---