CSSalign-self プロパティは、現在のフレックス行のフレックスアイテムを、 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 の代替配置は startlast 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.
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応

36

291

21 -webkit-

12

202

18 — 203

49 -webkit-

48 -webkit- 4

1112.1 なし
start and end ? ? あり ? ? ?
left and right ? ?52 ? ? ?
baseline ? ? あり ? ? ?
first baseline and last baseline ? ?52 ? ? ?
stretch ? ?52 ? ? ?
safe and unsafe なし なし63 なし なし ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

36

291

21 -webkit-

36

291

25 -webkit-

あり

あり -webkit-

あり なし なし ?
start and end ? ? ? ? ? ? ?
left and right ? ? ?52 ? ? ?
baseline ? ? ? あり ? ? ?
first baseline and last baseline ? ? ?52 ? ? ?
stretch ? ? ?52 ? ? ?
safe and unsafe ? ? なし63 ? ? なし

1. Older versions of the specification treat absolute positioned children as though they are a 0 by 0 flex item. Later specification versions take the children out of the flow and set their positions based on align and justify properties. Chrome implements the new behavior beginning with Chrome 52.

2. Before Firefox 27, only single-line flexbox is supported.

3. From version 18 until version 20 (exclusive): this feature is behind the layout.css.flexbox.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.

4. From version 48: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.

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

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応57165210 -ms- 14410.1
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応5752 あり524410.36.2

1. IE10 and 11 have the property -ms-grid-column-align which acts in a similar way to align-self.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: mfuji09, yyss, fscholz, teoli, ethertank
最終更新者: mfuji09,