align-self
は CSS のプロパティで、グリッドやフレックスのアイテムの align-items
の値を上書きします。グリッドでは、アイテムはグリッド領域内に配置されます。フレックスボックスでは、アイテムは交差軸上に配置されます。
このデモのソースファイルは 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>where
<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 |
---|---|
適用対象 | flex items, grid items, and absolutely-positioned boxes |
継承 | なし |
計算値 | auto computes to itself on absolutely-positioned elements, and to the computed value of align-items on the parent (minus any legacy keywords) on all other boxes, or start if the box has no parent. Its behavior depends on the layout model, as described for justify-self . Otherwise the specified value. |
アニメーションの種類 | 個別 |
ブラウザーの互換性
このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 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
プロパティ