align-self プロパティ

プロパティ align-self は、個別の flex ブロックに対する交差軸方向の配置、およびグリッド内の個別の要素に対する垂直軸方向の配置を設定します。このプロパティは、本質的に align-items プロパティを、特定のブロックに対して適用するものです。

構文

セレクタ {
	align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

値

値	説明
`flex-start`	ブロックは交差軸の開始位置に配置されます。
`flex-end`	ブロックは交差軸の終了位置に配置されます。
`center`	ブロックは交差軸の中央に配置されます。
`baseline`	ブロックは自身のベースラインに沿って配置されます。ベースラインとは、`'p'`、`'q'`、`'y'`、 `'g'` のような文字のディセンダーを考慮しない、文字の下端を通る仮想の線のことです。
`stretch`	ブロックは交差軸方向に利用可能なすべてのスペースを占めるように引き伸ばされます。ただし、設定されている場合は `min-width` および `max-width` が考慮されます。要素に幅や高さが設定されている場合は、 `stretch` は無視されます。
`auto`	ブロックは、プロパティ `align-items` で設定された通りに配置されます。

デフォルト値: auto。

例 . stretch の値

この例では、すべてのブロックに flex-start が設定されています (プロパティ align-items)。 3番目のブロックには、値 stretch の align-self が設定されています:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: stretch;
}

例 . flex-end の値

この例では、プロパティ align-items の値としてすべてのブロックに flex-start が設定されています。 3番目のブロックには、値 flex-end の align-self が設定されています:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div id="elem">3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: flex;
	align-items: flex-start;
	flex-direction: row;
	border: 1px solid #696989;
	height: 100px;
}
#parent > div {
	min-width: 100px;
	border: 1px solid #696989;
}
#elem {
	align-self: flex-end;
}

例 . グリッドにおける垂直軸開始位置への配置

最初の要素を垂直軸の開始位置に配置してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div id="elem2">2</div>
	<div id="elem3">3</div>
	<div id="elem4">4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: start;
}

例 . グリッドにおける垂直軸中央への配置

最初の要素を垂直軸の中央に配置してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: center;
}

例 . グリッドにおける垂直軸終了位置への配置

グリッド内の最初の要素を垂直軸の終了位置に配置してみましょう:

<div id="parent">
	<div id="elem1">1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px 100px;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
	padding: 10px;
	border: 2px solid #696989;
	height: 200px;
	width: 400px;
}
#parent > div {
	gap: 10px;
	padding: 10px;
	box-sizing: border-box;
	border: 1px solid #696989;
}
#elem1 {
	align-self: end;
}