トップページ  > CSS  > align-self

★CSSリファレンス

align-self …… コンテナ内の個別アイテムの縦方向の揃え位置を指定する
Google Chrome Safari Firefox Opera
広告

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

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

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

■値

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

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

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

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

■使用例1

CSSソース

.sample {
	display:grid;
	grid-template-columns:auto 1fr auto;
	grid-template-rows:50px;
	width:300px; background-color:white; border:1px solid black;
}
.hidari {grid-column:1; width:50px; background-color:yellow;}
.naka {grid-column:2; width:50px; background-color: orange;}
.migi {grid-column:3; width:50px; background-color:pink;}

HTMLソース

<h5>中ボックスにalign-self:flex-start;を指定。</h5>
<div class="sample">
<div class="hidari">左</div>
<div class="naka" style="align-self:flex-start;">中</div>
<div class="migi">右</div>
</div>

<h5>中ボックスにalign-self:center;を指定。</h5>
<div class="sample">
<div class="hidari">左</div>
<div class="naka" style="align-self:center;">中</div>
<div class="migi">右</div>
</div>

<h5>中ボックスにalign-self:flex-end;を指定。</h5>
<div class="sample">
<div class="hidari">左</div>
<div class="naka" style="align-self:flex-end;">中</div>
<div class="migi">右</div>
</div>
↓↓↓

ブラウザ上の表示

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

■使用例2

CSSソース

ul.sample_menu {
	display:-webkit-flex;
	display:flex;
	width:100%;
	height:100px;
	background-color:#ffeeaa;
	list-style-type:none;
	margin:0; padding:0;
}
ul.sample_menu a {
	display:block;
	margin:2px; padding:10px; font-size:10px;
	background-color:#66cc99; color:#ffffff;
	text-align:center;
	text-decoration:none;
}

HTMLソース

<h5>メニュー2だけalign-self:flex-end;と個別指定</h5>
<ul class="sample_menu">
<li><a href="#">メニュー1</a></li>
<li style="align-self:flex-end;"><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
↓↓↓

ブラウザ上の表示

メニュー2だけalign-self:flex-end;と個別指定
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
さくらのレンタルサーバ
ロリポップ!レンタルサーバー
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ