CSS | display:flexで逆順で表示するサンプル

2021-05-15CSS フレックスボックス,CSS

CSSのflexbox（display:flex）を使っ要素の並び順を逆順にして右から表示、または下から表示するサンプルコードです。

横並びの逆順

flexboxで並べる要素を横並びの逆順にするにはflex-directionプロパティでrow-reverseを指定します。

See the Pen CSS flexbox row-reverse by yochans (@yochans) on CodePen.

<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

.container {
	display: flex;
	flex-direction: row-reverse; /* 横並び逆順 */
	gap: 2px; /* 余白 */
}

.container div {
	flex-grow: 1;
	padding: 6px;
	display: flex;
	flex-wrap: wrap; /* 折返し指定 */
	justify-content: center; /* 中央揃え */
	align-items: center; /* 中央揃え */
	color: #FFF;
	background: #000;
}

サンプルでは可変幅を指定していますが、row-reverseで固定幅にした場合は右端から描画されますので左寄せにする時はjustify-contentでleftを指定します。

縦並びの逆順

flexboxで並べる要素を縦並びの逆順にするにはflex-directionプロパティでcolumn-reverseを指定します。

See the Pen CSS flexbox column-reverse by yochans (@yochans) on CodePen.

<div class="container">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

.container {
	display: flex;
	flex-direction: column-reverse; /* 縦並び逆順 */
	gap: 2px; /* 余白 */
}


.container div {
	flex-grow: 1;
	padding: 6px;
	display: flex;
	flex-wrap: wrap; /* 折返し指定 */
	justify-content: center; /* 中央揃え */
	align-items: center; /* 中央揃え */
	color: #FFF;
	background: #000;
}

サンプルでは可変幅を指定していますが、column-reverseで固定幅にした場合は下から描画されますので上寄せにする時はalign-itemsでflex-startを指定します。