###前提・実現したいこと
2017年になってからflexboxを多用しております。
高さを揃えるなど大変便利なcssと思っております。
そんな中でこうなれば良いのになっと思っている質問がございますので
どなた様かお答えいただければ幸いでございます。
実現したい完成画像を用意しました。
###実現させたい仕様
・画像が3倍数に収まれば綺麗な見栄えなのですが、3の倍数以外の画像数のときもあります、そのときは左にうまく詰まる仕様にしたいのです。(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カラムの場合の解決策も知りたいです。
追記の質問です。
###実現させたい仕様
・画像が4の倍数または4n+1に収まれば綺麗な見栄えなのですが、今のままではきれいに収まらない画像数のときもあります、
例
パターン① 4n+3の場合
パターン② 4n+2の場合
そのときは左にうまく詰まる仕様にしたいのです。(cms化を想定しているということです)
・justify-content: space-between;を使っているのは両サイドにビッチリとつけたいからです。
※両サイドにビッチリとつけることが出来るのであれば、space-betweenにこだわりません。
・現在画像は全て高さが均一ですが、高さ違いがくることもあるのでalign-items: stretch;は入れておきたいです。(align-items: stretch;が便利なのでflexboxが好きです)
回答2件
あなたの回答
tips
プレビュー