flexboxで要素を両端揃えにする

flexboxで複数の要素を横並びにする際、要素を両端揃えにする(親要素に左端と右端を合わせる)方法を試してみます。

サンプルコード

flexboxで両端揃えにする場合、justify-content: space-between;を使用します。

HTML

<div class="parent">
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
	<div class="children"></div>
</div>

CSS

.parent {
	width: 640px;
	margin: auto;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.children {
	width: 200px;
	height: 200px;
	margin-bottom: 20px;
	background: #eeeeee;
}

flex-wrap: wrap;は2行以上の場合に改行させるために入れていますが、1行想定の場合は不要です。
最終行がきれいに収まっている場合はこれで問題ないのですが、今回のように最終行がきれいに収まらない場合、意図と違う表示になることがあります。(動作としては正しいです。)
justify-content: space-between;のデモページ

今回のように3列表示の場合、疑似要素を使って対応することができます。

CSS

.parent {
	width: 640px;
	margin: auto;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.parent:after {
	content: "";
	display: block;
	width: 200px;
}
.children {
	width: 200px;
	height: 200px;
	margin-bottom: 20px;
	background: #eeeeee;
}

疑似要素に列の幅を指定する必要がありますのでご注意ください。
疑似要素を使って対応するデモページ

列数が多い場合、空要素を追加して対応する必要があるようです。
個数が決まっている場合はHTML内に空要素を直接記述でもよいですが、複数行の場合個数が可変である場合が多いと思いますので、今回はJavaScriptで空要素を追加するようにしてみます。

CSS

.parent {
	width: 650px;
	margin: auto;

	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
.children {
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
	background: #eeeeee;
}
.empty {
	width: 100px;
}

JavaScript

$(function() {
	add_empty_to_flexbox($('.parent'), 6);
});

/**
 * justify-content: space-between;で両端揃えにしたときの最終行の対応
 * @param obj target (required) 対象のjQueryオブジェクト
 * @param num line   (required) 列数
 */
function add_empty_to_flexbox(target, line) {
	// 追加する空要素に付与するclass名
	var emptyClass = 'empty';
	// 既に空要素が追加されている場合は削除する
	target.children('.'+emptyClass).remove();
	// flexbox対象の個数を取得
	var l = target.children().length;
	// 最終行の個数を取得
	var lastL = l % line;
	// きれいに収まっている場合は以下の処理をしない
	if(lastL <= 0) {
		return;
	}
	// 不足分だけ空要素を追加
	for (var i = 0; i < line - lastL; i++) {
		var div = $('<div>').addClass(emptyClass);
		target.append(div);
	}
}

add_empty_to_flexbox()を実行することで空要素を追加できます。
JavaScriptで空要素を追加するデモページ
レスポンシブサイトで列数が可変の場合、列数が変わったタイミングでadd_empty_to_flexbox()を実行して調整してください。
　

【参考サイト】

• Flexboxのjustify-contentで最後の行を左寄せにする方法 – to-R