CSS

Cascading Style Sheets align-self property.

align-self

　align-self プロパティは、コンテナ内の個別アイテムの縦方向（交差軸方向）の揃え位置を指定する際に使用します。

　アイテムの縦方向のマージンのいずれかが auto に指定されている場合、align-self プロパティの指定は無効となります。

　コンテナ内のアイテムの横方向の揃え位置を指定する場合は、justify-self プロパティを使用します。

値

auto
親ボックスのalign-itemプロパティの値に合わせる。（初期値）
flex-start
開始位置揃え、通常は上端揃え。
flex-end
終了位置揃え、通常は下端揃え。
center
センター揃え。
baseline
ベースライン揃え。
stretch
フレックスアイテムが伸ばされて揃えられる。

　W3Cのページ に掲載されている以下の図がわかりやすいようです。

初期値・適用対象・値の継承

初期値
stretch
適用対象
フレックスアイテム
値の継承
しない

Sample

中ボックスに align-self:flex-start;を指定。

左
中
右

中ボックスに align-self:center;を指定。

左
中
右

中ボックスに align-self:flex-end;を指定。

左
中
右

HTML source


<p>中ボックスに align-self:flex-start;を指定。</p>
<div class="sample">
	<div class="sLeft">左</div>
	<div class="sCenter" style="align-self:flex-start;">中</div>
	<div class="sRight">右</div>
</div>

<p>中ボックスに align-self:center;を指定。</p>
<div class="sample">
	<div class="sLeft">左</div>
	<div class="sCenter" style="align-self:center;">中</div>
	<div class="sRight">右</div>
</div>

<p>中ボックスに align-self:flex-end;を指定。</p>
<div class="sample">
	<div class="sLeft">左</div>
	<div class="sCenter" style="align-self:flex-end;">中</div>
	<div class="sRight">右</div>
</div>

CSS source


.sample {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 80px;
	background-color: palegreen;
}

.sLeft {
	grid-column: 1;
	width: 60px;
	background-color: green;
}

.sCenter {
	grid-column: 2;
	width: 60px;
	background-color: orange;
}

.sRight {
	grid-column: 3;
	width: 60px;
	background-color: green;
}