flex-basis プロパティ
flex-basis プロパティは、display:flex;が設定されたフレックスコンテナにおいて、子エレメント(フレックスアイテム)の幅を指定するプロパティです。
このプロパティはフレックスアイテムに指定します。
もしも、フレックスアイテムにwidthプロパティが設定してあると、この値が優先されます。
.parent{ display: flex; } .flex_item{ flex-basis: 200px; }
flex-basis プロパティと似たプロパティに、flex-grow、flex-shrinkプロパティがあります。
flex-growプロパティはフレックスコンテナの幅に余りがないように拡がります。
flex-shrinkプロパティはフレックスアイテムが横に並びきらない場合の縮小比の指定です。
値はキーワードでも指定できますが、キーワード値はエレメントの内容と元の設定値によって幅が決まります。
ページ内 Index
構文(Syntax)
CSS
flex-basis: auto | number | initial | inherit ;
DOM ( JavaScript )
String = object.style.flexBasis;
object.style.flexBasis=" auto | number | initial | inherit ";
値(Values)
Value | 摘要 |
---|---|
auto | 初期値(default値) |
number | CSSの長さ |
fill | 内容に合わせる |
max-content | 内容に対する最大限の幅 |
min-content | 内容に対する最低限の幅 |
fit-content | 内容に合わせる |
content | 内容に合わせる |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | auto |
継承(Inherited) | No |
CSS Animation | Yes |
Example
flex-basis の例です。flex-basis プロパティはフレックスアイテム(子エレメント)に指定します。 どこかにwidth プロパティが設定されていると、この値が優先されます。
キーワード指定もできますが、ここでは機能しているか分かり易いように絶対値で指定しています。
関連する CSS プロパティ
flex-basis プロパティには、以下のような関連するプロパティがあります。
display:flex; | 複数のエレメントを緩やかに配列 |
align-content | フレックスラインの垂直方向の配置 |
align-items | 初期の配置位置 |
align-self | フレックスアイテムの配置位置 |
justify-content | 主軸方向での配置を指定 |
flex-wrap | 横並びにしたフレックスアイテムの折り返し |
flex-basis | フレックスアイテムの基本となる幅 |
flex-direction | フレックスアイテムの縦または横の並び |
flex-flow | flex-direction、flex-wrapを一括指定 |