| 項 目 | 説 明 |
|---|---|
| 記述形式 | セレクタ {align-self: 値 } |
| 値 の形式 | auto，flex-start，flex-end，center，baseline，stretch |
| 初 期 値 | auto |
| 対応ブラウザー | C?+ / e?+ / N?+ / Fx?+ / Op?+ / Ch?+ / Sa?+ |
| 適用可能な要素 | フレキシブル・コンテナの子要素（flex items） |
| 継 承 | しない |
align-self プロパティ は，フレキシブル・コンテナ内の行内の子要素（flex items）に対して 副軸（cross-axis）方向の配置方法 を指定します。 このプロパティの指定は，フレキシブル・コンテナの align-items プロパティ で指定した値を上書きします。
指定できる値の形式は，以下のとおりです。
| 値 | 説 明 |
|---|---|
| auto | 親要素のフレキシブル・コンテナの align-items プロパティ の値を用います。 親要素を持たない場合には，stretch とされます。 |
| flex-start | 子要素（flex items）の 副開始端（cross-start） を行ボックスの 副開始端 に揃えます。 |
| flex-end | 子要素の 副終了端（cross-end） を行ボックスの 副終了端 に揃えます。 |
| center | 子要素の 余白ボックス（margin box）を行ボックスの 副軸（cross axis） 方向の中央に揃えます。 行ボックスの 副軸 方向のサイズが子要素のそれより小さい場合には，両方向に同じだけはみ出します。 |
| baseline | 子要素のインライン軸が 副軸 に等しい場合は，この値は flex-start を指定した場合と同じとなります。 それ以外の場合は，baseline alignment の指定にしたがって，すべての行内の子要素のベースラインを揃えた上，そのベースラインから 副開始端 までのサイズが最も大きな要素をコンテナの 副開始端 に揃えます。 |
| stretch | 子要素の 副軸方向サイズ（cross size） プロパティの値が auto の場合は， min-width, max-width, min-height, max-height などのプロパティの指定による制約を守った上で，その 副軸方向サイズ を行ボックスの 副軸方向サイズ に最も近い値にします。 |
なお，フレキシブル・コンテナと行ボックスの配置に関しては，多数の用語 が定義され，用いられておりますので，これらについての知識は必須です。
| HTMLソース | |
|---|---|
| CSS <head> ～ </head> |
<style type="text/css" media="screen, handheld, print, tv" >
<!--
div.fwrapp {
width: 600px;
height: 120px;
margin: 10px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
align-items: flex-start;
background-color: #f0f0f0;
}
div.fwrapp div {
width: 150px;
color: #ffffff;
font-size: 25px;
text-align: center;
padding-top: 10px;
}
.height1 { height: 35px; background-color: green; }
.height2 { height: 45px; background-color: maroon; align-self: flex-end; }
.height3 { height: 55px; background-color: blue; align-self: center; }
.height4 { height: 65px; background-color: red; }
.height5 { height: 75px; background-color: black; align-self: flex-end; }
.height6 { height: 85px; background-color: olive; align-self: center; }
-->
</style> |
| HTML <body> ～ </body> |
<div class="fwrapp"> <div class="height1">1</div> <div class="height2">2</div> <div class="height3">3</div> <div class="height4">4</div> <div class="height5">5</div> <div class="height6">6</div> </div> |
| ブラウザー 表示例 |
|---|
1
2
3
4
5
6
|
上の例では，フレキシブル・コンテナ（fwrappクラスの<div>要素）の align-itemsプロパティの値は flex-start に設定されています。 しかし，子要素の height2クラスと height5クラスの <div>要素 では，align-selfプロパティの値が flex-end に，また，height3クラスと height6クラスの <div>要素 では， center に設定されていますので，これらの要素の実際の配置は，それに従って行われます。