flexboxを使ってボックスを上下左右均等に並べたい。

前提・実現したいこと

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件

ベストアンサー

親要素にpadding: 5px、子要素にmargin: 5pxと同じ値を設定すると空白が全て同じ幅(10px)になります。

JSFiddle Demo

css
1.contents1 {
2  border: solid 1px #333;
3  height: 80px;
4  display: flex;
5  margin-bottom: 10px;
6  padding: 5px;  /* 追加 */
7}
8
9.box1, .box2, .box3, .box4 {
10  border: solid 1px #333;
11  /* height: 38px; */
12  flex: 1;
13  justify-content: space-around;
14  /* padding: 10px 0px 10px 0px; */
15  margin: 5px;  /* 変更 */
16}

投稿2018/03/31 07:51

karamarimo

総合スコア2551

退会済みユーザー

2018/03/31 08:02

karamarimoさん回答ありがとうございます。記載の通り記述するとコードの行も減り簡単に表すことが出来ました！全体的に見て親要素の高さだけ指定してあげれば、子要素の高さ、幅などは自動的に認識してくれるということでしょうか？

karamarimo

2018/03/31 08:08

認識というのがどういうことか分かりませんが、flexboxの子要素はデフォルトで align-items: stretch なので高さは親要素に合わせて伸びます。幅は flex: 1 が指定されているので親要素に合わせて伸びます。

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

的外れかもしれませんが、以下のようにしてみてはいかがでしょうか？

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    <title>flexbox1レイアウト</title>
7    <style>
8        body {
9            margin: 0;
10            padding: 0;
11            font-size: 15px;
12        }
13
14        #float_wrapper {
15            width: 960px;
16            margin: 0 auto;
17            border: solid 1px #333;
18            padding: 10px;
19            margin-bottom: 10px;
20        }
21
22        #header {
23            border: solid 1px #333;
24            margin-bottom: 10px;
25        }
26
27        #menu {
28            border: solid 1px #333;
29            margin-bottom: 10px;
30        }
31
32        .contents1 {
33            border: solid 1px #333;
34            height: 80px;
35            display: flex;
36            margin-bottom: 10px;
37        }
38
39        .box1, .box2, .box3, .box4 {
40            border: solid 1px #333;
41            height: 38px;
42            flex: 1;
43            justify-content: space-around;
44            padding: 10px 0px 10px 0px;
45            margin: 10px 0px 10px 10px;
46        }
47
48        .box4 { /* 追記 */
49            margin-right: 10px;
50        }
51
52        .contents2 {
53            border: solid 1px #333;
54            height: 80px;
55            display: flex;
56            margin-bottom: 10px;
57        }
58
59        .box5, .box6, .box7 {
60            /*ここにも記述する予定*/
61        }
62
63        .contents3 {
64            border: solid 1px #333;
65            height: 80px;
66            display: flex;
67            margin-bottom: 10px;
68        }
69
70        .box8, .box9 {
71            /*ここにも記述予定*/
72        }
73
74        .contents4 {
75            border: solid 1px #333;
76            height: 80px;
77            display: flex;
78            margin-bottom: 10px;
79        }
80
81        .box10, .box11, .box12, .box13, .box14, .box15 {
82            /*ここにも記述予定*/
83        }
84
85        #footer {
86            border: solid 1px #333;
87        }
88    </style>
89</head>
90<body>
91<div id="float_wrapper">
92    <div id="header">
93        <h1>ヘッダー</h1>
94    </div>
95    <div id="menu">
96        <h2>メニュー</h2>
97    </div><!-- menu終わり -->
98    <div class="contents1">
99        <div class="box1"></div>
100        <div class="box2"></div>
101        <div class="box3"></div>
102        <div class="box4"></div>
103    </div><!-- contents1終わり -->
104    <div class="contents2">
105        <div class="box5"></div>
106        <div class="box6"></div>
107        <div class="box7"></div>
108    </div><!-- contents2終わり -->
109    <div class="contents3">
110        <div class="box8"></div>
111        <div class="box9"></div>
112    </div><!-- contents3終わり -->
113    <div class="contents4">
114        <div class="box10"></div>
115        <div class="box11"></div>
116        <div class="box12"></div>
117        <div class="box13"></div>
118        <div class="box14"></div>
119        <div class="box15"></div>
120    </div><!-- contents4終わり -->
121    <div id="footer">
122        <h2>フッター</h2>
123    </div>
124</div><!-- floatwrapper終わり -->
125</body>
126</html>