CSS の align-self プロパティは、現在のフレックス行のフレックスアイテムを、 align-items の値を上書きして配置します。アイテムの交差軸側のマージンのいずれかが auto に設定されている場合、 align-self は無視されます。
この対話型サンプルのソースファイルは GitHub リポジトリに格納されています。対話型サンプルプロジェクトに協力したい場合は、 https://github.com/mdn/interactive-examples をクローンしてプルリクエストを送信してください。
このプロパティは、ブロックレベルのボックスやテーブルのセルには適用されません。
構文
/* キーワード値 */ 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>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. |
| アニメーションの種類 | 個別 |
| 正規順序 | 形式文法で定義される一意のあいまいでない順序 |
ブラウザーの対応
このページの互換性一覧表は構造化データから生成されています。データに協力したいのであれば、 https://github.com/mdn/browser-compat-data をチェックアウトしてプルリクエストを送信してください。
フレックスレイアウトでの対応
| 機能 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| 基本対応 | 36 291 21 -webkit- | 12 | 202 18 — 203 49 -webkit- | 11 | 12.1 | なし |
start and end | ? | ? | あり | ? | ? | ? |
left and right | ? | ? | 52 | ? | ? | ? |
baseline | ? | ? | あり | ? | ? | ? |
first baseline and last baseline | ? | ? | 52 | ? | ? | ? |
stretch | ? | ? | 52 | ? | ? | ? |
safe and unsafe | なし | なし | 63 | なし | なし | ? |
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung 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.
グリッドレイアウトでの対応
| 機能 | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| 基本対応 | 57 | 52 | あり | 52 | 44 | 10.3 | 6.2 |
1. IE10 and 11 have the property -ms-grid-column-align which acts in a similar way to align-self.
関連情報
- CSS フレックスボックスガイド: フレックスボックスの基本概念
- CSS フレックスボックスガイド: フレックスコンテナー内でのアイテムの配置
- CSS グリッドガイド: CSS グリッドレイアウト内でのボックス配置
- CSS ボックス配置
align-itemsプロパティ