Flex boxで左右均等配置しつつ回り込んだ要素を左寄せにしたい

6つの同じサイズの要素をFlexで並べています。
ウインドウサイズや解像度によって3×2列、4と2の2列、5と1の2列、6の1列
と変動するのですが
justify-content: space-between;
で指定すると折り返した2列目の要素が左右に張り付いてしまい
justify-content: space-around;
で指定すると折り返した2列目の要素が真ん中に寄ってしまいます。
折り返した2列目の要素が常に左揃えになるようにしたいのですが何か良い方法はありますでしょうか？

■　■　■
■　■　■

■　■　■　■
■　■　　　　←こうなるようにしたい

css
1.container{
2    width:100%;
3    display:flex;
4    display: -webkit-flex;
5    justify-content: space-between;
6    -webkit-justify-content: space-between;
7    flex-wrap: wrap;
8    -webkit-flex-wrap:wrap;
9}
10.item{
11    width:50px;
12    height:50px;
13    background:#ccc;
14}

html
1<div class="container">
2    <div class="item"></div>
3    <div class="item"></div>
4    <div class="item"></div>
5    <div class="item"></div>
6    <div class="item"></div>
7    <div class="item"></div>
8</div>

行動規範の内容に同意します

回答5件

質問者さんが実現しようとしていることをflexboxでやろうとすると、非常に面倒です。CSSだけで完結することすら難しいと思います。それほどの手間をかけてまでflexboxを使わなければいけないのでなければ、それ以外のものを使うほうが良いと思います。今回は、CSS Grid Layoutを使った例を載せておきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style>
7        .container {
8            display: grid;
9            width: 100%;
10            grid-auto-rows: 50px;
11            grid-template-columns: repeat(auto-fit, 50px);
12            grid-gap: 100px;
13            justify-content: space-between;
14        }
15
16        .item {
17            background: #ccc;
18        }
19    </style>
20</head>
21<body>
22<div class="container">
23    <div class="item"></div>
24    <div class="item"></div>
25    <div class="item"></div>
26    <div class="item"></div>
27    <div class="item"></div>
28    <div class="item"></div>
29</div>
30</body>
31</html>

投稿2018/03/12 15:04

s8_chu

総合スコア14731

空のアイテムを置くことでできるようです。こちらをお試しください。

css
1.container::after{
2  content:"";
3  display: block;
4  width:30%;
5}

参考記事： http://blog.webcreativepark.net/2016/08/15-125202.html

投稿2018/03/12 04:11

NARI_Creator

総合スコア18

s8_chu

2018/03/13 01:53

これ質問者さんの意図した通りに動作しない気がするのですが、どうでしょうか？

行動規範の内容に同意します

Chrome以外無理だけどこういう力技も。（変数部分を展開すればFirefoxでもEdgeでもいけるはず）
※ 画面幅1200px以上は処理していないのでマージンが消えています（規定値をきちんと付ければ対処可能）

CSS
1.container{
2    width:100%;
3    display:flex;
4    display: -webkit-flex;
5    /*
6    justify-content: space-between;
7    -webkit-justify-content: space-between;
8    */
9    flex-wrap: wrap;
10    -webkit-flex-wrap:wrap;
11}
12.item{
13    width:50px;
14    height:50px;
15    background:#ccc;
16    margin: 5px;
17}
18@media (max-width: 1200px) { :root { --my-count: 19; } }
19@media (max-width: 1140px) { :root { --my-count: 18; } }
20@media (max-width: 1080px) { :root { --my-count: 17; } }
21@media (max-width: 1020px) { :root { --my-count: 16; } }
22@media (max-width: 960px) { :root { --my-count: 15; } }
23@media (max-width: 900px) { :root { --my-count: 14; } }
24@media (max-width: 840px) { :root { --my-count: 13; } }
25@media (max-width: 780px) { :root { --my-count: 12; } }
26@media (max-width: 720px) { :root { --my-count: 11; } }
27@media (max-width: 660px) { :root { --my-count: 10; } }
28@media (max-width: 600px) { :root { --my-count: 9; } }
29@media (max-width: 540px) { :root { --my-count: 8; } }
30@media (max-width: 480px) { :root { --my-count: 7; } }
31@media (max-width: 420px) { :root { --my-count: 6; } }
32@media (max-width: 360px) { :root { --my-count: 5; } }
33@media (max-width: 300px) { :root { --my-count: 4; } }
34@media (max-width: 240px) { :root { --my-count: 3; } }
35@media (max-width: 180px) { :root { --my-count: 2; } }
36@media (max-width: 120px) { :root { --my-count: 1; } }
37.item{
38	margin: calc(5px + calc(calc(100% - calc(50px + 10px) * var(--my-count)) / calc(2 * var(--my-count))));
39}
40```**動くサンプル：**[https://jsfiddle.net/myp6seva/1/](https://jsfiddle.net/myp6seva/1/)
41**動くサンプル（1ウィンドウ表示）：**[https://jsfiddle.net/myp6seva/1/show/](https://jsfiddle.net/myp6seva/1/show/)
42
43---
44
45
46
47【CSSの変数を使う - CSS | MDN】
48[https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables](https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_variables)
49
50【calc() - CSS | MDN】
51[https://developer.mozilla.org/ja/docs/Web/CSS/calc](https://developer.mozilla.org/ja/docs/Web/CSS/calc)

投稿2018/03/12 16:04

kei344

総合スコア69407

x_x

2018/03/13 01:22

ある程度広げると突然アイテム間のマージンがなくなりますが、これは意図するものなのでしょうか？

kei344

2018/03/13 01:26

＞ ※ 画面幅1200px以上は処理していないのでマージンが消えていますと書いている通り、面倒なのでそこまでで処理を終えています。（いや、デフォルトをきちんと設定すればいいだけなのですが）

x_x

2018/03/13 02:03

回答ありがとうございます。縦方向まで変わるので何か違和感があったのでした

行動規範の内容に同意します

cssでゴリ押し
.itemの幅と倍数でmargin-rightをcalc計算すれば…

html
1<!doctype html>
2<html lang="jp">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6    <style type="text/css">
7    html,body{
8        padding: 0;
9        margin: 0;
10    }
11    .container{
12    width:100%;
13    display:flex;
14    display: -webkit-flex;
15    justify-content: space-between;
16    -webkit-justify-content: space-between;
17    flex-wrap: wrap;
18    -webkit-flex-wrap:wrap;
19}
20.item{
21    width:100px;
22    height:50px;
23    background:#ccc;
24}
25/*5列用*/
26@media (max-width: 599px) and (min-width: 500px){
27    .container div.item:nth-child(5n+2):last-child {
28        margin-right: calc(300px + (100% - 500px) / 4 * 3);
29    }
30    .container div.item:nth-child(5n+3):last-child {
31        margin-right: calc(200px + (100% - 500px) / 4 * 2);
32    }
33    .container div.item:nth-child(5n+4):last-child {
34        margin-right: calc(100px + (100% - 500px) / 4 * 1);
35    }
36
37}
38/*4列用*/
39@media (max-width: 499px) and (min-width: 400px){
40    .container div.item:nth-child(4n+2):last-child {
41        margin-right: calc(200px + (100% - 400px) / 3 * 2);
42    }
43    .container div.item:nth-child(4n+3):last-child {
44        margin-right: calc(100px + (100% - 400px) / 3 * 1);
45    }
46
47}
48/*3列用*/
49@media (max-width: 399px) and (min-width: 300px) {
50    .container div.item:nth-child(3n-1):last-child {
51        margin-right: calc(100px + (100% - 300px) / 2 * 1);
52    }
53}
54    </style>
55</head>
56<body>
57<div class="container">
58    <div class="item">1</div>
59    <div class="item">2</div>
60    <div class="item">3</div>
61    <div class="item">4</div>
62    <div class="item">5</div>
63    <div class="item">6</div>
64    <!--<div class="item">7</div>-->
65    <!--<div class="item">8</div>-->
66    <!--<div class="item">9</div>-->
67</div>
68</body>
69</html>

投稿2018/03/12 09:31

sousuke

総合スコア3828

justify-content: flex-start;
で左揃えになります。

投稿2018/03/12 04:01

ysnr

総合スコア35

manga_daisuki

2018/03/12 04:09

ありがとうございます。その場合要素間に均等にスペースが入らなくなりますよね？親要素いっぱいに均等に並べた上で２列目も左から並んでほしいのです。

ysnr

2018/03/12 04:27

なるほど。意図を理解できておらずすみません。それだと、NARI_Creator様が回答されているように疑似要素で対応するか、 justify-content: flex-start;にして、全ての子要素にmargin-leftを%で指定して隙間をあけるか、ですかね。 margin-leftで隙間を開ける場合は、改行されるたびに、css mediaqueryで指定しなおさないといけないので、少し面倒くさいですが。

行動規範の内容に同意します

あなたの回答