English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
align-items属性は、flexコンテナ内の要素にデフォルトのアライメント方法を指定します。
以下の表は、この属性の使用状況とバージョンハイストリをまとめています。
| デフォルト値： | stretch |
|---|---|
| 適用： | フレックスコンテナ |
| 継承： | ありません |
| アニメーション可能： | いいえ。参照してください： アニメーション属性。 |
| バージョン： | CSS3の新機能 |
| JavaScript 構文： | object.style.alignItems="center" |
この属性の構文は以下の通りです：
align-items: baseline | center | flex-start | flex-end | stretch | initial | inherit
以下の例では、使用しているalignを示しています。-items属性。
.flex-container {
/* Safari */
display: -webkit-flex;
-webkit-align-items: center;
display: flex;
align-items: center;
}テストしてみる‹/›以下のテーブルはこの属性の値を説明しています。
| 値 | 説明 |
|---|---|
| baseline | 要素がフレックスコンテナのベースラインに位置します。 |
| center | 要素が伸縮コンテナの中心に位置します。 |
| flex-start | 要素がフレックスコンテナの先頭に位置します。 |
| flex-end | 要素がフレックスコンテナの端に位置します。 |
| stretch | 要素を伸ばして伸縮コンテナに適応させます。空間はすべての要素間で平均に分配されます。これはデフォルト値です。 |
| initial | この属性をデフォルト値に設定します。 |
| inherit | 指定された場合、関連する要素は親要素のalign属性を使用します。-itemsの値。 |
align-items属性のブラウザの互換性について、すべての主要ブラウザがこの属性をサポートしています。
|
注意： Apple Safari 7およびそれ以降のバージョンがこのalignをサポートしています-items属性、ただし-webkit-プレフィックス、例えば-webkit-align-items: center;
以下のチュートリアルを参照してください：CSS アライメント。
関連属性：align-content、align-items、align-self、display、flex、flex-basis、flex-direction、flex-flow、flex-grow、flex-shrink、flex-wrap、justify-content、min-height、min-width、order。