CSS flex-basis | CSS プロパティ値| 意味使い方実例

CSS flex-basis| CSS:スタイルシート関数要素使い方・書き方例 CSS サンプル

2018-07-08 css-reference

ページコンテンツ

`flex-basis` CSS プロパティとは

トピック：フレックスアイテムの初期メインサイズの flex basis を指定することができる box-sizing を使用して別に指定されていない限り、このプロパティが content-box の寸法を定義する

基本書式：

セレクタ

{

プロパティ

値;

}

3番目のフレックスアイテムの最初の長さを100ピクセルに設定するサンプルコードを試す

 div:nth-of-type(3) {
    -webkit-flex-basis: 100px; 
/* Safari 6.1+ */
    flex-basis: 100px;
}

デフォルト値・初期値 :	`auto`
適用対象 :	flex items, including in-flow pseudo-elements
継承 :	不可
メディア :	visual
計算値 :	指定通り。ただし相対的 length は絶対的 length に変換
アニメーションの種類 :	length または percentage, calc();
正規順序 :	the length or percentage before the keyword, if both are present
CSSの構文	`flex-basis: number \| auto \| initial \| inherit;`

値	説明
`width`	フレキシブルアイテムの幅を指定する絶対単位または相対単位の長さ。負の値は無効です。
`auto`	フレキシブルアイテムの幅は、その`width`プロパティの値と同じ。`width`フレキシブルアイテムにプロパティが指定されていない場合は、その内容に応じた幅になるこれはデフォルト値です。
`inherit`	このプロパティをデフォルト値に設定する
`inherit`	親要素からこのプロパティを継承する

機能	Firefox	Chrome	Internet Explorer	Opera	Safari
基本サポート	18.0 (18.0) [1] 22.0 (22.0)	21.0-webkit	11 [2]	12.10	7.0-webkit [3]
`auto`	18.0 (18.0)	21.0	11	12.10	7.0-webkit

機能	Firefox Mobile	Android	IE Phone	Opera Mobile	Safari Mobile
基本サポート	不明	不明	サポートなし✖	12.10	サポートなし✖

：flex-basis 関連記事