flexboxのレイアウトの組み方　-cms化を想定したものにしたい-

###前提・実現したいこと
2017年になってからflexboxを多用しております。
高さを揃えるなど大変便利なcssと思っております。

そんな中でこうなれば良いのになっと思っている質問がございますので
どなた様かお答えいただければ幸いでございます。

実現したい完成画像を用意しました。

●３カラムの場合

###実現させたい仕様
・画像が３倍数に収まれば綺麗な見栄えなのですが、３の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。
ソースを書きます。
・flexbox歴2ヶ月です、まだまだflexboxの基本機能しか使えてないと思います、他にこうした方がよいというご意見などもコメント頂けましたら嬉しいです。

html
1<div class="room_cards">
2   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
3   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
4   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
5   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
6   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
7   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
8   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
9   <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
10</div>

css
1.room_cards {
2	display: -webkit-flex;/* Safari */
3	display: flex;
4	-webkit-flex-wrap: wrap;/* Safari */
5	flex-wrap: wrap;
6	-webkit-justify-content: space-between;/* Safari */
7	justify-content: space-between;
8	-webkit-align-items: stretch;/* Safari */
9	align-items: stretch;
10}
11.room_cards .card {
12	width: 31%;
13	margin-bottom: 30px;
14}
15

###●４カラムの場合の解決策も知りたいです。

追記の質問です。

###実現させたい仕様
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
例
パターン① 4n+3の場合
パターン② 4n+2の場合
そのときは左にうまく詰まる仕様にしたいのです。（cms化を想定しているということです）
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。（align-items: stretch;が便利なのでflexboxが好きです）

kei344

2017/02/15 11:14

画像が表示されていませんが、削除されたのでしょうか。

holic

2017/02/16 16:04

ご指摘ありがとうございます、画像を再度アップしました。そして回答もいただくことが出来ました、ありがとうございます。

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

回答2件

ベストアンサー

このようにしてはいかがでしょう。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            margin: 0;
9            padding: 0;
10            width: 100%;
11        }
12
13        .room_cards {
14            display: -webkit-flex; /* Safari */
15            display: flex;
16            -webkit-flex-wrap: wrap; /* Safari */
17            flex-wrap: wrap;
18            -webkit-justify-content: space-between; /* Safari */
19            justify-content: space-between;
20            -webkit-align-items: stretch; /* Safari */
21            align-items: stretch;
22        }
23
24        .room_cards .card {
25            width: 31%;
26            margin-bottom: 30px;
27        }
28
29        .room_cards::after {
30            width: 31%;
31            content: "";
32            flex: inherit;
33        }
34    </style>
35</head>
36<body>
37<div class="room_cards">
38    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
39    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
40    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
41    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
42    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
43    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
44    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
45    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
46</div>
47</body>
48</html>

(追記)

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        body {
8            margin: 0;
9            padding: 0;
10            width: 100%;
11        }
12
13        img {
14            width: 100%;
15        }
16
17        .room_cards {
18            margin: -5px;
19            display: -webkit-flex; /* Safari */
20            display: flex;
21            -webkit-flex-wrap: wrap; /* Safari */
22            flex-wrap: wrap;
23            -webkit-align-items: stretch; /* Safari */
24            align-items: stretch;
25            justify-content: flex-start;
26        }
27
28        .card {
29            margin: 5px;
30            flex-basis: calc(25% - 10px);
31        }
32    </style>
33</head>
34<body>
35<div class="room_cards">
36    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
37    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
38    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
39    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
40    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
41    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
42    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
43    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
44    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
45    <div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
46</div>
47</body>
48</html>

投稿2017/02/15 10:33

編集2017/02/16 11:53

s8_chu

総合スコア14731

holic

2017/02/15 10:52

早急なご返答ありがとうございます。 .room_cards::after { width: 31%; content: ""; flex: inherit; } こちらの部分ですよね。画像枚数が8枚と決まっているときは、こちらの処理でクリアなのですが、 cms化を想定している箇所でありまして、7枚のとき6枚のときと想定しておかなければならない状況なのです。他に策はありますでしょうか。

s8_chu

2017/02/15 11:10

7枚のとき、6枚のときでなにか異常な挙動をとってしまうのでしょうか。どのようにうまくいかないのか、詳細を記述していただけませんか？また、6枚のときは画像の枚数が3の倍数になるので考慮しなくても良いように質問文を読んで思っていたのですが。

holic

2017/02/16 02:36

s8_chuさん返信ありがとうございます。落ち着いて、「s8_chu」さんから頂いたソースを実行してみたら、・3n ・3n+1 ・3n+2 どのパターンでもうまく表示することができました、ありがとうございます。それともう一点お聞きしたい新たな質問が出てきたのですが、もし「４カラムの場合」のよい解決策はありますでしょうか、よろしければ回答をお願いしたいです。仕様を上に追記しました。

s8_chu

2017/02/16 11:53

新たな質問であれば、新しく質問する方が良いと思いますが、とりあえず追記しました。

holic

2017/02/16 15:49

２つの質問ともきれいにお答え頂きありがとうございます。大変満足しました。ありがとうございます。（明日社内でもこの手法を発表したいと思います）ご指摘の通り、今後新たな質問が生まれましたら、新たに投稿いたします、色々とアドバイスありがとうございます。

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

こういうことでは？

CSS
1.room_cards {
2  display: -webkit-flex;/* Safari */
3  display: flex;
4  -webkit-flex-wrap: wrap;/* Safari */
5  flex-wrap: wrap;
6  -webkit-align-items: stretch;/* Safari */
7  align-items: stretch;
8}
9.room_cards .card {
10  width:31%;
11  margin-right:3.5%;
12  padding-bottom:30px;
13}
14.room_cards .card:nth-child(3n) {
15  margin-right:0;
16}

ま、わたくしなら、リスト使いますけど…

投稿2017/02/15 13:53

LibertyBell3

総合スコア1084

holic

2017/02/16 16:03

YukitomoNishinoさんご回答ありがとうございます。こちうの回答も素晴らしいです。（申し訳ありませんが先に回答いただいたs8_chuさんにベストアンサーつけました）考えていただきましてありがとうございます、コチラのソースも利用させていただきます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する