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.
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 36
完全対応 36
部分対応 29
補足
補足 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.
完全対応 21
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge 完全対応 12Firefox 完全対応 20
補足
完全対応 20
補足
補足 Before Firefox 27, only single-line flexbox is supported.
未対応 18 — 20
無効
無効 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.
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
完全対応 48
接頭辞付き 無効
接頭辞付き -webkit- のベンダー接頭辞が必要
無効 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.
IE 完全対応 11Opera 完全対応 12.1Safari 未対応 なしWebView Android 完全対応 37
完全対応 37
部分対応 4.4
補足
補足 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.
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Chrome Android 完全対応 36
完全対応 36
部分対応 29
補足
補足 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.
完全対応 25
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Edge Mobile 完全対応 あり
完全対応 あり
完全対応 あり
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Firefox Android 完全対応 ありOpera Android 未対応 なしSafari iOS 未対応 なしSamsung Internet Android ?
start and endChrome ? Edge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
left and rightChrome ? Edge ? Firefox 完全対応 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
baselineChrome ? Edge ? Firefox 完全対応 ありIE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 ありOpera Android ? Safari iOS ? Samsung Internet Android ?
first baseline and last baselineChrome ? Edge ? Firefox 完全対応 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
stretchChrome ? Edge ? Firefox 完全対応 52IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android 完全対応 52Opera Android ? Safari iOS ? Samsung Internet Android ?
safe and unsafeChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 63IE 未対応 なしOpera 未対応 なしSafari ? WebView Android ? Chrome Android ? Edge Mobile 未対応 なしFirefox Android 完全対応 63Opera Android ? Safari iOS ? Samsung Internet Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeEdge MobileAndroid 版 FirefoxAndroid 版 OperaiOS 版 SafariSamsung Internet
基本対応Chrome 完全対応 57Edge 完全対応 16Firefox 完全対応 52IE 部分対応 10
接頭辞付き 補足
部分対応 10
接頭辞付き 補足
接頭辞付き -ms- のベンダー接頭辞が必要
補足 IE10 and 11 have the property -ms-grid-column-align which acts in a similar way to align-self.
Opera 完全対応 44Safari 完全対応 10.1WebView Android 完全対応 57Chrome Android 完全対応 52Edge Mobile 完全対応 ありFirefox Android 完全対応 52Opera Android 完全対応 44Safari iOS 完全対応 10.3Samsung Internet Android 完全対応 6.2

凡例

完全対応  
完全対応
部分対応  
部分対応
実装ノートを参照してください。
実装ノートを参照してください。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報

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

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