align-self

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

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

構文

/* キーワード値 */ 
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 の代替配置は start、last 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 Flexbox Guide: Basic Concepts of Flexbox
• CSS Flexbox Guide: Aligning items in a flex container
• CSS Grid Guide: Box alignment in CSS Grid layouts
• CSS Box Alignment
• The align-items property