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

2018.04.07

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

サンプルコード

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

HTML

1
2
3
4
5
6
7
8
9
10
<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$(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()を実行して調整してください。
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930