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