align-self
align-self プロパティは、グリッドやフレックスアイテムの交差軸方向の揃え位置を個別に指定します。このプロパティはアイテムの縦方向のマージンが auto の場合無効になります。また、ブロックレベル要素やテーブルのセルには適用されません。
プロパティの詳細
- 値
- auto, normal, self-start, self-end, flex-start, flex-end, center, baseline, first baseline, last baseline, stretch, safe, unsafe
- 初期値
- auto
- 対象
- フレックスアイテム、グリッドアイテム、絶対配置されたボックス
- 継承
- しない
- CSS レベル
- CSS 3
値
- auto
- 親要素の align-items の値に従う
- narmal
- 現在のレイアウトモードに依存
- self-start
- ボックスの開始位置揃え。
- self-end
- ボックスの終了位置揃え。
- flex-start
- 開始位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの下部に隙間ができます。
- flex-end
- 終了位置揃え。ボックスの合計の高さよりコンテナが大きければコンテナの上部に隙間ができます。
- center
- 中央揃え。ボックスの合計の高さよりコンテナが大きければコンテナの上下に隙間を取りセンタリングされます。
- baseline, first baseline, last baseline
- 整列されたボックス内のコンテンツのベースラインが一直線に揃うように配置されます。
- stretch
- ボックスが拡大し行間のスペースが詰められ、コンテナ内に隙間なく配置されます。
- safe
- 他の配置ワードとともに指定。ボックスがコンテナをはみ出した時、開始位置揃えに変更されたうえでコンテナからはみ出ます。
- unsafe
- 他の配置ワードとともに指定。ボックスがコンテナをはみ出した時、配置を維持したままコンテナからはみ出ます。
