css
1.box { 2 display: -webkit-flex; 3 display: -webkit-box; 4 display: -ms-flexbox; 5 display: flex; 6 -webkit-flex-flow: row wrap; 7 -ms-flex-flow: row wrap; 8 flex-flow: row wrap; 9} 10 11.box-1 { 12 width: 10%; 13} 14 15.box-2 { 16 width: 20%; 17} 18 19.box-3 { 20 width: 30%; 21} 22 23.box-4 { 24 width: 40%; 25} 26 27.box-5 { 28 width: 50%; 29} 30 31.box-6 { 32 width: 60%; 33} 34 35.box-7 { 36 width: 70%; 37} 38 39.box-8 { 40 width: 80%; 41} 42 43.box-9 { 44 width: 90%; 45} 46 47.box-10 { 48 width: 100%; 49} 50.box-1,.box-2,.box-3,.box-4,.box-5,.box-6,.box-7,.box-8,.box-9,.box-10{ 51 padding: 1rem; 52 border: 1px solid; 53}
html
1 <div class="box"> 2 <div class="box-1">box-1</div> 3 <div class="box-1">box-1</div> 4 <div class="box-1">box-1</div> 5 <div class="box-1">box-1</div> 6 <div class="box-1">box-1</div> 7 <div class="box-1">box-1</div> 8 <div class="box-1">box-1</div> 9 <div class="box-1">box-1</div> 10 <div class="box-1">box-1</div> 11 <div class="box-1">box-1</div> 12 </div> 13
横に並んで欲しいのに9個目の時点で折り返してしまいます。
paddingとborderが犯人なのはわかっていますがどう対処したらいいのですか?
グリッドシステムを実装するのが目標なのですが、flexはいまいちわからないので横並びを実装するためだけに使いたいのですが・・・問題を解決するにはflexなんとかを使わないとダメですよね?
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/08/17 07:33
2015/08/17 07:46