CSS align-self 属性

定義と使用方法

align-self 属性がフレックスコンテナ内の選択されたプロジェクトのアライメントを指定します。

注意：alignSelf 属性は、フレックスコンテナの align-items 属性。

また参照してください：

CSS チュートリアル：CSS Grid

CSS チュートリアル：CSS Flexbox

CSS リファレンスマニュアル：alignContent 属性

CSS リファレンスマニュアル：alignItems 属性

CSS リファレンスマニュアル：justifySelf 属性

HTML DOM リファレンスマニュアル：alignSelf 属性

例

フレックス要素内のプロジェクトの1つを中央にアライメント：

#myBlueDiv {
  align-self: center;
}

実際に試してみてください

CSS 文法

align-self: auto|stretch|center|flex-start|flex-end|baseline|initial|inherit;

属性値

値 説明
auto デフォルト。要素は親コンテナの align-items 属性を継承します。親コンテナがない場合は「stretch」になります。
stretch 要素はコンテナに適応するために伸ばされます。
center 要素はコンテナの中央に位置されます。
flex-start 要素はコンテナの先頭に位置されます。
flex-end 要素はコンテナの末端に位置されます。
baseline 要素はコンテナのベースラインに定位されます。
initial この属性をデフォルト値に設定します。参照してください。 initial。
inherit この属性は、親要素からこの属性を継承します。参照してください。 inherit。

技術的詳細

デフォルト値： auto
継承： いいえ
アニメーション作成： サポートしていません。参照してください：アニメーション関連属性。
バージョン： CSS3
JavaScript 文法： object.style.alignSelf="center"

ブラウザのサポート

テーブルの数字は、この属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
57.0 16.0 52.0 10.1 44.0