CSS Flexboxを使いこなす – その2

CSS Flexboxを使いこなす – その1 の続きです。

前回は、以下の3点についてまとめました。

今回は、以下の3点です。

justify-content プロパティ(水平方向の揃え方の指定)

flex-direction プロパティで指定した方向に対して、Flexアイテム(子要素)の配置を指定できます。

(デフォルト justify-content: flex-start

justify-content: flex-start(並列の場合「左揃え」、縦列の場合「上揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

サンプルページ: justify-content-flex-start.html

justify-content: flex-end(並列の場合「右揃え」、縦列の場合「下揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
}

サンプルページ: justify-content-flex-end.html

justify-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

サンプルページ: justify-content-center.html

justify-content: space-between(最初と最後のアイテムは端に、それ以外は等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

サンプルページ: justify-content-space-between.html

justify-content: space-around(最初と最後のアイテムも含め、全てのアイテムを等間隔に配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-pack: distribute;
	justify-content: space-around;
}

サンプルページ: justify-content-space-around.html

align-items プロパティ(垂直方向の配置の指定)

全てのFlexアイテムに対して、垂直方向の配置を指定します。

(デフォルト align-items: stretch

align-items: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

サンプルページ: align-items-flex-start.html

align-items: flex-end(並列の場合「下揃え」、縦列の場合「右揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}

サンプルページ: align-items-flex-end.html

align-items: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

サンプルページ: align-items-center.html

align-items: baseline(ベースラインを揃えて配置)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
}

サンプルページ: align-items-baseline.html

align-items: stretch(Flexアイテムの高さが指定されてない場合、一番コンテンツの多いものに高さを合わせる)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: stretch;
	-ms-flex-align: stretch;
	align-items: stretch;
}

サンプルページ: align-items-stretch.html

align-content プロパティ(行の配置)

flex-wrap プロパティで「nowrap」以外に設定した場合、複数行になります。その時の行の配置を指定します。

(デフォルト align-content: stretch

align-content: flex-start(並列の場合「上揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: start;
	align-content: flex-start;
}

サンプルページ: align-content-flex-start.html

align-content: flex-end(並列の場合「下揃え」、縦列の場合「左揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: end;
	align-content: flex-end;
}

サンプルページ: align-content-flex-end.html

align-content: center(「中央揃え」)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: center;
	align-content: center;
}

サンプルページ: align-content-center.html

align-content: space-between(最初と最後の行は端に、他の行は等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: justify;
	align-content: space-between;
}

サンプルページ: align-content-space-between.html

align-content: space-around(最初と最後の行も含め、全ての行が等間隔)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: distribute;
	align-content: space-around;
}

サンプルページ: align-content-space-around.html

align-content: stretch(最初の行は端に揃え、行の後に等間隔のスペース)

.flex-container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

	-ms-flex-line-pack: stretch;
	align-content: space-stretch;
}

サンプルページ: align-content-stretch.html

ここまで!

⇒  Flexbox を使いこなす – その1

⇒  Flexbox を使いこなす – その3

カテゴリーCSS