: これは CSS 料理帳のページのテンプレートページです。 新しい料理帳のページを作成するときに、これを生のテンプレートとして使用してください。
イタリック体のコメントは、テンプレートの一部の使い方に関する情報です。

このレシピが解決する問題の説明または、あなたが実証しているパターンの説明。

Requirements

このパターンには何を含める必要がありますか、それともどのような問題を解決する必要がありますか? それをここにリストします。

Recipe

下の例のパスを変更して、マージされた例を指すようにします。 最後のパラメータは実際のサンプルの高さで、必要に応じて変更できます。

マージされたダウンロードバージョンを指すようにリンクを変更します。

Download the example

Choices made

パターンを作成したときの決定を説明してください。 なぜあなたは特定の方法を選んだのですか? あなたがここに追加の例を追加したい場合 — 例えば代替のあるバージョン — ぜひ追加してください。 パターンは非常に単純なものからより複雑なものまで多岐にわたるので、このセクションは意図的に緩めています。

Useful fallbacks or alternative methods

レシピを構築するための有用な代替方法、またはサポートしていないブラウザーをサポートする必要がある場合に使用する代替レシピがある場合は、それらをここの別のセクションに含めてください。

Accessibility concerns

アクセシビリティに関して注意すべき点がある場合に、これを含めます。 あなたのパターンに関係がなければ、これは省略することができます。

Browser compatibility

The various layout methods have different browser support. See the charts below for details on basic support for the properties used.

以下の例で align-items を含めたように、使用した重要なプロパティの互換データ(compat data)を含めます。

align-items

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
Supported in Flex LayoutChrome 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12
完全対応 12
完全対応 12
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox 完全対応 20
補足
完全対応 20
補足
補足 Multi-line flexbox has been supported since Firefox 28.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 18 — 20
無効
無効 From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 完全対応 11
補足
完全対応 11
補足
補足 In Internet Explorer 10 and 11, if column flex items have align-items: center; set on them and their content is too large, then they will overflow the bounds of their container. See Flexbug #2.
Opera 完全対応 12.1Safari 完全対応 7
接頭辞付き
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
WebView Android 完全対応 52
完全対応 52
部分対応 4.4
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 52
完全対応 52
部分対応 29
補足
補足 Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 20
補足
完全対応 20
補足
補足 Multi-line flexbox has been supported since Firefox 28.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 18 — 20
無効
無効 From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 完全対応 12.1Safari iOS 完全対応 7
接頭辞付き
完全対応 7
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Samsung Internet Android ?
Supported in Grid LayoutChrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE 未対応 なしOpera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 43Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

See also

  • 関連プロパティのリンク: example-property
  • コンテキストでプロパティを使用方法を示す記事へのリンク: "Using … article"
  • 非常に良い外部リンク。 外部リンクを恐れてはいけませんが、それらは傑出したものであるべきであり、細かい点を述べるだけのものではありません。

ドキュメントのタグと貢献者

このページの貢献者: Wind1808
最終更新者: Wind1808,