align-self

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

試してみましょう

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。フレックスボックスの交差軸のマージンが auto の場合、align-self は無視されます。

構文

css
/* キーワード値 */
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: anchor-center;

/* ベースラインによる配置 */
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: revert;
align-self: revert-layer;
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 が指定されたアイテムすべての寸法の合計は、ちょうど配置コンテナーの交差軸方向を埋めるようになります。

anchor-center

アンカー位置指定要素の場合、関連付けられたアンカー要素のブロック方向の中心にアイテムを配置します。 anchor-center を使用してアンカーの中央に配置を参照してください。

safe

アイテムのサイズが配置コンテナーを超えるとき、アイテムは配置モードが start であったかのように配置されます。

unsafe

アイテムの配置コンテナーのサイズの関係にかかわらず、指定した値を尊重します。

公式定義

初期値auto
適用対象フレックスアイテム、グリッドアイテム、絶対位置指定のボックス
継承なし
計算値絶対位置指定要素に対しては auto は自分自身に対して計算し、それ以外のすべてのボックスに対しては親の align-items の計算値 (から古いキーワードを引いた値) に計算し、親が無ければ start になる。この動作は justify-self で説明したとおり、レイアウトモデルの依存する。それ以外の場合は指定された値となる。
アニメーションの種類離散値

形式文法

align-self = 
  auto                                  |
  normal                                |
  stretch                               |
  <baseline-position>                   |
  <overflow-position>? <self-position>  |
  anchor-center                         

<baseline-position> = 
  [ first | last ]?  &&
  baseline           

<overflow-position> = 
  unsafe  |
  safe    

<self-position> = 
  center      |
  start       |
  end         |
  self-start  |
  self-end    |
  flex-start  |
  flex-end

例

HTML

html
<section>
  <div>Item #1</div>
  <div>Item #2</div>
  <div>Item #3</div>
</section>

CSS

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;
}

結果

仕様書

Specification
CSS Box Alignment Module Level 3
# align-self-property
CSS Flexible Box Layout Module Level 1
# align-items-property

ブラウザーの互換性

BCD tables only load in the browser

関連情報