前提・実現したいこと
floatタグを使って実装していたレイアウトを、現在Flexboxを使って
練習として1カラムのレイアウトを作成しようと取り組んでおります。
問題点としては、下記CSSコードにある.contents1 ~ .contents4の中の.boxを
上下左右均等に並べたいです。
paddingとmarginで余白を設けて綺麗に並べるコツをご教授いただきたいです。
発生している問題
.contents1 { border: solid 1px #333; height: 80px; display: flex; margin-bottom: 10px; } .box1, .box2, .box3, .box4 { border: solid 1px #333; height: 38px; flex: 1; justify-content: space-around; padding: 10px 0px 10px 0px; margin: 10px 0px 10px 10px; }
上記記載の.box1~.box4を先ずは均等に左右、上下の余白を設けて指定のサイズのボックス内に
収めていきたいです。
該当のソースコード
CSS
1body { 2 margin: 0; 3 padding: 0; 4 font-size: 15px; 5} 6 7#float_wrapper { 8 width: 960px; 9 margin: 0 auto; 10 border: solid 1px #333; 11 padding: 10px; 12 margin-bottom: 10px; 13} 14 15#header { 16 border: solid 1px #333; 17 margin-bottom: 10px; 18} 19 20#menu { 21 border: solid 1px #333; 22 margin-bottom: 10px; 23} 24 25.contents1 { 26 border: solid 1px #333; 27 height: 80px; 28 display: flex; 29 margin-bottom: 10px; 30} 31 32.box1, .box2, .box3, .box4 { 33 border: solid 1px #333; 34 height: 38px; 35 flex: 1; 36 justify-content: space-around; 37 padding: 10px 0px 10px 0px; 38 margin: 10px 0px 10px 10px; 39} 40 41.contents2 { 42 border: solid 1px #333; 43 height: 80px; 44 display: flex; 45 margin-bottom: 10px; 46} 47 48.box5, .box6, .box7 { 49 /*ここにも記述する予定*/ 50} 51 52.contents3 { 53 border: solid 1px #333; 54 height: 80px; 55 display: flex; 56 margin-bottom: 10px; 57} 58 59.box8, .box9 { 60 /*ここにも記述予定*/ 61} 62 63.contents4 { 64 border: solid 1px #333; 65 height: 80px; 66 display: flex; 67 margin-bottom: 10px; 68} 69 70.box10, .box11, .box12, .box13, .box14, .box15 { 71 /*ここにも記述予定*/ 72} 73 74#footer { 75 border: solid 1px #333; 76}
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="utf-8"> 5<meta name="viewpoint" content="width=device-width,initial-scale=1"> 6<link rel="stylesheet" href="css/layout_float1_flexbox.css"> 7<title>flexbox1レイアウト</title> 8</head> 9 <body> 10 <div id="float_wrapper"> 11 <div id="header"> 12 <h1>ヘッダー</h1> 13 </div> 14 <div id="menu"> 15 <h2>メニュー</h2> 16 </div><!-- menu終わり --> 17 <div class="contents1"> 18 <div class="box1"></div> 19 <div class="box2"></div> 20 <div class="box3"></div> 21 <div class="box4"></div> 22 </div><!-- contents1終わり --> 23 <div class="contents2"> 24 <div class="box5"></div> 25 <div class="box6"></div> 26 <div class="box7"></div> 27 </div><!-- contents2終わり --> 28 <div class="contents3"> 29 <div class="box8"></div> 30 <div class="box9"></div> 31 </div><!-- contents3終わり --> 32 <div class="contents4"> 33 <div class="box10"></div> 34 <div class="box11"></div> 35 <div class="box12"></div> 36 <div class="box13"></div> 37 <div class="box14"></div> 38 <div class="box15"></div> 39 </div><!-- contents4終わり --> 40 <div id="footer"> 41 <h2>フッター</h2> 42 </div> 43 </div><!-- floatwrapper終わり --> 44 </body> 45</html>
試したこと
justify-content: space-between: にてフレックスアイテムを均等に配置したが
.contents1の中に均等に入らない状態。
補足情報(FW/ツールのバージョンなど)
Google Chrome 最新版
バージョン: 65.0.3325.181(Official Build) (64 ビット)
エディタは、Bracketsを使用。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/03/31 08:02
2018/03/31 08:08