例
柔軟のすべての項目のアラインメント中心<div>要素を:
div
{
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
»それを自分で試してみてください 定義と使用法
ALIGN-itemsプロパティは、フレキシブルコンテナ内のアイテムのデフォルトの配置を指定します。
Tip: ALIGN-itemsプロパティをオーバーライドするために各アイテムの整列自己のプロパティを使用します。
デフォルト値: | stretch |
---|---|
継承されました: | no |
アニメーション: | no. Read about animatable |
バージョン: | CSS3 |
JavaScriptシンタックス: | object .style.alignItems="center" Try it |
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-webkit-に続く数字は接頭辞で働いていた最初のバージョンを指定します。
プロパティ | |||||
---|---|---|---|---|---|
align-items | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- | 12.1 |
CSSの構文
align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit;
プロパティ値
値 | 説明 | それを再生します |
---|---|---|
stretch | デフォルト。 アイテムは、コンテナに収まるように伸縮され | それを再生します» |
center | アイテムは、容器の中央に位置しています | それを再生します» |
flex-start | アイテムは、コンテナの先頭に配置されています | それを再生します» |
flex-end | アイテムは、容器の端部に配置されています | それを再生します» |
baseline | アイテムは、容器のベースラインに配置されています | それを再生します» |
initial | このプロパティがデフォルト値に設定します。 初期についての記事を読みます | それを再生します» |
inherit | その親要素からこのプロパティを継承します。 継承についての記事を読みます |
関連ページ
CSSリファレンス: align-content property
CSSリファレンス: align-self property
HTML DOMリファレンス: alignItems property