前提・実現したいこと
2017年になってからflexboxを多用しております。
高さを揃えるなど大変便利なcssと思っております。
そんな中でこうなれば良いのになっと思っている質問がございますので
どなた様かお答えいただければ幸いでございます。
実現したい完成画像を用意しました。
実現させたい仕様
・画像が3倍数に収まれば綺麗な見栄えなのですが、3の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。(cms化を想定しているということです)
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。
ソースを書きます。
・flexbox歴2ヶ月です、まだまだflexboxの基本機能しか使えてないと思います、他にこうした方がよいというご意見などもコメント頂けましたら嬉しいです。
<div class="room_cards">
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
</div>
.room_cards {
display: -webkit-flex;/* Safari */
display: flex;
-webkit-flex-wrap: wrap;/* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-between;/* Safari */
justify-content: space-between;
-webkit-align-items: stretch;/* Safari */
align-items: stretch;
}
.room_cards .card {
width: 31%;
margin-bottom: 30px;
}
●4カラムの場合の解決策も知りたいです。
実現させたい仕様
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
例
パターン① 4n+3の場合
パターン② 4n+2の場合
そのときは左にうまく詰まる仕様にしたいのです。(cms化を想定しているということです)
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。(align-items: stretch;が便利なのでflexboxが好きです)
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+5
このようにしてはいかがでしょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
}
.room_cards {
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-justify-content: space-between; /* Safari */
justify-content: space-between;
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
}
.room_cards .card {
width: 31%;
margin-bottom: 30px;
}
.room_cards::after {
width: 31%;
content: "";
flex: inherit;
}
</style>
</head>
<body>
<div class="room_cards">
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
</div>
</body>
</html>
(追記)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
width: 100%;
}
img {
width: 100%;
}
.room_cards {
margin: -5px;
display: -webkit-flex; /* Safari */
display: flex;
-webkit-flex-wrap: wrap; /* Safari */
flex-wrap: wrap;
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
justify-content: flex-start;
}
.card {
margin: 5px;
flex-basis: calc(25% - 10px);
}
</style>
</head>
<body>
<div class="room_cards">
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
<div class="card"><img src="http://placehold.it/200x200/27709b/ffffff"></div>
</div>
</body>
</html>
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
+1
こういうことでは?
.room_cards {
display: -webkit-flex;/* Safari */
display: flex;
-webkit-flex-wrap: wrap;/* Safari */
flex-wrap: wrap;
-webkit-align-items: stretch;/* Safari */
align-items: stretch;
}
.room_cards .card {
width:31%;
margin-right:3.5%;
padding-bottom:30px;
}
.room_cards .card:nth-child(3n) {
margin-right:0;
}
ま、わたくしなら、リスト使いますけど…
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 89.99%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
質問への追記・修正、ベストアンサー選択の依頼
kei344
2017/02/15 20:14
画像が表示されていませんが、削除されたのでしょうか。
holic
2017/02/17 01:04
ご指摘ありがとうございます、画像を再度アップしました。そして回答もいただくことが出来ました、ありがとうございます。