【CSS】このデザインはCSSで実装できますか？

お世話になります。

上図のように横幅固定（598px）のレイアウトで、横に3つ並べるレイアウトをCSSで作りたいと考えております。
1つの幅を約198pxと書いておりますが、線の関係もあるので、1pxの誤差は問題ありません。

今は横3つの計5つですが、今後6つや7つに増える可能性もあるので、増えても問題ないように記述したいです。

display:flexやtable-cellなどで出来ないか模索しましたが、CSSでやる方法が思いつきません。

ご存じの方いれば、教えてくださいm(__)m

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

回答2件

ベストアンサー

http://jsfiddle.net/hweeyxv2/
Flexで。

CSS
1#box{
2  display:flex;
3  width:597px;
4  flex-flow:row wrap;
5  align-content: space-between;
6  border-top:1px solid;
7  border-left:1px solid;
8}
9.items{
10  width:198px;
11  background-color:white;
12  border-right:1px solid;
13  border-bottom:1px solid;
14}

投稿2015/12/09 05:39

Lhankor_Mhy

総合スコア36074

rossi46hiro

2015/12/09 05:52

知らなかった...こんなやり方が... ブラウザの対応が現時点だと案件によっては問題になりそうですが、新しいブラウザのみだったらいいですねこれ！

退会済みユーザー

2015/12/09 06:05

いつもありがとうございます。これは、すごいですね！flexで実装できるとは驚きです！ flex関連のプロパティを調べます。回答ありがとうございましたm(__)m

enokiyo

2016/08/06 18:20

この方法だと２行目は左寄せにならないと思いますが・・・。

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

JSFiddle

こんな感じでしょうか？HTML/CSSのみでやるとすると高さを可変なので、tableレイアウトになるかと。
ただ、この場合、行をtrを使い手動で区切っているので、セルの数が増えたりするとHTMLの書き換えが少し面倒です。

Javasciprtを使うのがOKならば、li要素をfloatで横並べて、liのwidthの値で列の個数を決め、floatのカラム落ちをわざと利用して行を構成する、高さは行のli最大heightをJavascriptで取得、同じ行の各セルに最大heightをセットする、みたいな感じにできます。こうすると、HTML側はliを追加するだけになるので、シンプルなものになるかと。

投稿2015/12/09 05:10

rossi46hiro

総合スコア992