align-self CSS プロパティはカレントの flex ラインの flex アイテムを、align-items の値を上書きして配置します。アイテムの cross-axis 側のマージンのいずれかが auto に設定されている場合、align-self は無視されます。

このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。

構文

/* キーワード値 */ 
align-self: auto; 
align-self: normal; 

/* Positional alignment */ 
/* align-self は left および right の値をとりません */
align-self: center; /* Put the item around the center */ 
align-self: start; /* Put the item at the start */ 
align-self: end; /* Put the item at the end */ 
align-self: self-start; /* Align the item flush at the start */ 
align-self: self-end; /* Align the item flush at the end */ 
align-self: flex-start; /* Put the flex item at the start */ 
align-self: flex-end; /* Put the flex item at the end */ 

/* Baseline alignment */ 
align-self: baseline; 
align-self: first baseline; 
align-self: last baseline; 
align-self: stretch; /* Stretch 'auto'-sized items to fit the container */ 

/* Overflow alignment */ 
align-self: safe center; 
align-self: unsafe center; 

/* グローバル値 */ 
align-self: inherit; 
align-self: initial; 
align-self: unset;

auto
親要素の align-items の値から計算します。
normal
このキーワードの効果は、現在のレイアウトモードに依存します:
  • 絶対配置レイアウトでは、置換要素の絶対配置ボックスでは start のように、その他の絶対配置ボックスでは stretch のように動作します。
  • 絶対配置レイアウトの通常配置では、stretch のように動作します。
  • flex アイテムでは stretch のように動作します。
  • grid アイテムでは stretch の一種のように動作しますが、アスペクト比や固有のサイズを持つボックスでは start のように動作します。
  • このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。
self-start
cross axis でアイテムの始端側に対応する配置コンテナーの端と同じ高さに、アイテムを配置します。
self-end
cross axis でアイテムの終端側に対応する配置コンテナーの端と同じ高さに、アイテムを配置します。
flex-start
flex アイテムの cross-start 側マージンの端は、ラインの cross-start の端に寄せられます。
flex-end
flex アイテムの cross-end 側マージンの端は、ラインの cross-end の端に寄せられます。
center
flex アイテムのマージンボックスは、cross-axis 上でライン内の中央に置かれます。アイテムの cross-size が flex コンテナより大きい場合は、両方向へ均等にはみ出します。
baseline
first baseline

last baseline
first-baseline 配置または last-baseline 配置への関与を指定します。ボックスの最初または最後のベースラインセットの配置ベースラインを、ベースライン共有グループ内のすべてのボックスで共有される最初または最後のベースラインセットで対応するベースラインに揃えます。
first baseline の代替配置は startlast baseline の代替配置は end です。
stretch
cross axis に沿うアイテムの合計サイズが配置コンテナーのサイズより小さく、またサイズが auto であるすべてのアイテムは (比例的にではなく) 均等に引き伸ばされます。ただし、max-height/max-width (あるいは同等の機能) による制限は尊重します。これにより、すべての auto サイズのアイテムの合計サイズは、cross axis に沿って配置コンテナーを完全に埋めるようになります。
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
継承不可
メディアvisual
計算値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 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応

36

291

21 -webkit-

36

291

21 -webkit-

あり

あり -webkit-

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

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.

関連情報

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

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