align-self

align-self は CSS のプロパティで、グリッドやフレックスのアイテムの align-items の値を上書きします。グリッドでは、アイテムはグリッド領域内に配置されます。フレックスボックスでは、アイテムは交差軸上に配置されます。

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが 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 で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。
アニメーションの種類離散値

ブラウザーの互換性

フレックスレイアウトでの対応

BCD tables only load in the browser

グリッドレイアウトでの対応

BCD tables only load in the browser

関連情報