CSS

この記事では「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;
}