align-self
align-self
は CSS のプロパティで、グリッドやフレックスのアイテムの align-items
の値を上書きします。グリッドでは、アイテムはグリッド領域内に配置されます。フレックスボックスでは、アイテムは交差軸上に配置されます。
The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.
このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto
の場合、 align-self
は無視されます。
構文
/* キーワード値 */
align-self: auto;
align-self: normal;
/* 位置による配置 */
/* align-self は left および right の値をとりません */
align-self: center; /* アイテムを中央付近に配置 */
align-self: start; /* アイテムを起点に配置 */
align-self: end; /* アイテムを末端に配置 */
align-self: self-start; /* アイテムを起点に詰めて配置 */
align-self: self-end; /* アイテムを末端に詰めて配置 */
align-self: flex-start; /* フレックスアイテムを起点に配置 */
align-self: flex-end; /* フレックスアイテムを末端に配置 */
/* ベースラインによる配置 */
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /* 寸法が 'auto' のアイテムをコンテナーに合うよう伸長 */
/* あふれたときの配置 */
align-self: safe center;
align-self: unsafe center;
/* グローバル値 */
align-self: inherit;
align-self: initial;
align-self: unset;
値
auto
- 親の
align-items
の値で計算します。 normal
- このキーワードの効果は、現在のレイアウトモードに依存します。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
start
のように動作し、その他の絶対位置ボックスにはstretch
のように動作します。 - 絶対位置指定レイアウトの固定位置指定時は、このキーワードは
stretch
と同様に動作します。 - フレックスアイテムでは、このキーワードは
stretch
と同様に動作します。 - グリッドアイテムでは、このキーワードは
stretch
のうちの一つと似た動作をしますが、アスペクト比や固有の寸法を持つボックスはstart
のように動作します。 - ブロックレベルボックスと表のセルでは、プロパティは適用されません。
- 絶対位置のレイアウトでは、このキーワードは置換の絶対位置ボックスには
self-start
- アイテムは交差軸の開始側に対応する配置コンテナーの端に詰めて配置されます。
self-end
- アイテムは交差軸の終端側に対応する配置コンテナーの端に詰めて配置されます。
flex-start
- このフレックスアイテムの cross-start マージン側が、行の cross-start 側に詰められます。
flex-end
- このフレックスアイテムの cross-end マージン側が、行の cross-end 側に詰められます。
center
- このフレックスアイテムのマージンボックスが、行の交差軸方向の中央に配置されます。アイテムの交差軸方向の寸法がフレックスコンテナーよりも大きい場合は、両方向に均等にはみ出します。
baseline
first baseline
last baseline
- first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline
の代替配置はstart
、last baseline
の代替配置はend
です。 stretch
- アイテムの交差軸方向の寸法の合計値が、配置コンテナーの寸法よりも小さく、アイテムの寸法が
auto
であった場合、アイテムの寸法はmax-height
/max-width
(または同等の機能) で課された制約を尊重しつつ、均等の寸法 (比例的ではない) に拡大されるので、auto
が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。 safe
- アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが
start
であったかのように配置されます。 unsafe
- アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。
形式文法
auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>ここで
<baseline-position> = [ first | last ]? baseline
<overflow-position> = unsafe | safe
<self-position> = center | start | end | self-start | self-end | flex-start | flex-end
例
HTML
<section>
<div>Item #1</div>
<div>Item #2</div>
<div>Item #3</div>
</section>
CSS
section {
display: flex;
align-items: center;
height: 120px;
background: beige;
}
div {
height: 60px;
background: cyan;
margin: 5px;
}
div:nth-child(3) {
align-self: flex-end;
background: pink;
}
表示結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Box Alignment Module Level 3 align-self の定義 |
草案 | 最新の構文定義に更新。 |
CSS Flexible Box Layout Module align-self の定義 |
勧告候補 | 初回定義 |
初期値 | auto |
---|---|
適用対象 | フレックスアイテム、グリッドアイテム、絶対位置指定のボックス |
継承 | なし |
計算値 | 絶対位置指定要素に対しては auto は自分自身に対して計算し、それ以外のすべてのボックスに対しては親の align-items の計算値 (から古いキーワードを引いた値) に計算し、親が無ければ start になる。この動作は justify-self で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。 |
アニメーションの種類 | 離散値 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
BCD tables only load in the browser
グリッドレイアウトでの対応
BCD tables only load in the browser
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内でのアイテムの配置
- CSS グリッドガイド: CSS グリッドレイアウト内でのボックス配置
- CSS ボックス配置
align-items
プロパティ