flex CSS プロパティとは
トピック：フレキシブル項目のフレキシブル長さのコンポーネントを指定する事ができる これは、flex-grow,flex-shrinkおよびflex-basisプロパティを一度に設定するための簡略化されたプロパティです。
プロパティ flex
実例 コード 1
サンプル コードを試す.flex-container {-webkit- flex ： 1 ; -ms- flex ： 1 ; flex ： 1 ; }
プロパティ 定義と使用法
| デフォルト値・初期値 : | 以下の一括指定の各プロパティとして
|
|---|
| 適用対象 : | flex items, including in-flow pseudo-elements |
|---|
| 継承 : | 不可 |
|---|
| メディア : | visual |
|---|
| 計算値 : | 以下の一括指定の各プロパティとして
|
|---|
| アニメーションの種類 : | 以下の一括指定の各プロパティとして
|
|---|
| 正規順序 : | 形式文法における値の出現順 |
|---|
| CSSの構文 | flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; |
|---|
プロパティ値
| 値 | 説明 |
|---|
flex-grow | フレックスアイテムの flex-grow を定義する 詳細は <number> を参照。負の値は無効とみなされる 省略時の既定値は 1 |
flex-shrink | フレックスアイテムの flex-shrink を定義する 詳細は<number>参照 負の値は無効とみなされる 省略時の既定値は 1 |
flex-basis | フレックスアイテムの flex-basis を定義する ことができる。width プロパティおよび height プロパティで有効な値を受け入れる。希望のサイズが 0 なら、フレキシビリティとして解釈されないように単位をつけなければならない。省略時の既定値は 0 |
none | flexを0 0 autoに設定するのと同じ 。 |
auto | flexを11に設定するのと同じ 。 |
inherit | このプロパティをデフォルト値に設定する |
inherit | 親要素からこのプロパティを継承する |
サポートするデスクトップ ブラウザ対応・互換性
| Property | Desktop 互換性 |
|---|
| flex | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯12 | フルサポート◯20 | フルサポート◯11 | フルサポート◯12.1 | フルサポート◯9 |
|---|
サポートするモバイル ブラウザ対応・互換性
| Property | Mobile 互換性 |
|---|
| flex | Android | Chrome for Android
| Edge Mobile | Firefox for Android
| Opera for Android
| iOS Safari | Samsung Internet |
|---|
| 基本 サポート | フルサポート◯29 | フルサポート◯29 | フルサポート◯あり | 不明 | フルサポート◯12.1 | フルサポート◯あり | 不明 |
|---|
CSS flex | CSS プロパティ 値| 意味 使い方 実例 – WebRef