フレキシブル要素内の 1 つのアイテムを中央揃えにします：
#myBlueDiv
{
-webkit-align-self: center; /* Safari 7.0+ */
align-self: center;
}
Try it Yourself ❯
align-self プロパティは、フレキシブルコンテナ内の選択したアイテムの配置方法を指定します。
注:align-self プロパティは、フレキシブルコンテナの align-items プロパティオーバーライドします。
| デフォルト値： | auto |
|---|---|
| 継承： | 継承する |
| アニメーション可否： | 不可。animatable を参照 |
| バージョン： | CSS3 |
| JavaScript 構文： | object.style.alignSelf="center" Try it |
表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。
数字の後に続く -webkit- は、接頭辞付きで動作した最初のバージョンです。
| プロパティ | |||||
|---|---|---|---|---|---|
| align-self | 21.0 | 11.0 | 20.0 | 9.0 7.0 -webkit- |
12.1 |
align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;
| 値 | 説明 | Play it |
|---|---|---|
| auto | デフォルト。親コンテナがない場合、要素は、その親コンテナの align-items プロパティか、または "stretch" を継承します | Play it ❯ |
| stretch | 要素はコンテナに合わせて配置されます | Play it ❯ |
| center | 要素はコンテナの中央に配置されます | Play it ❯ |
| flex-start | 要素はコンテナの始端に配置されます | Play it ❯ |
| flex-end | 要素はコンテナの終端に配置されます | Play it ❯ |
| baseline | 要素はコンテナのベースラインに配置されます | Play it ❯ |
| initial | プロパティにデフォルト値を設定します。initial を参照 | Play it ❯ |
| inherit | このプロパティは親要素を継承します。inherit を参照 |
CSSリファレンス：align-content プロパティ
CSSリファレンス：align-items プロパティ
HTML DOM リファレンス：alignSelf プロパティ