一段目と二段目の幅を揃えたいです。

スタッフの紹介ページを作っています。
２人ずつ横並びにして、３人目から二段目になるのですが
４人目がいないので、１人目と３人目の幅が合いません。

どこに何を入れれば幅を揃えることができるのでしょうか？

html
1<div class="staff_contents2">
2<div class="staff_left">
3     <div class="staff_flexbox">
4         <div class="box1">
5             <img src="">
6         </div>
7         <div class="box2">
8             <p class="name">あああ</p>
9             <hr>
10             <p class="job">あああ</p>
11             <p class="comment">あああ</p>
12         </div>
13     </div>
14 </div>
15<div class="staff_right">
16     <div class="staff_flexbox">
17         <div class="box1">
18             <img src="">
19         </div>
20         <div class="box2">
21             <p class="name">いいい</p>
22             <hr>
23             <p class="job">いいい</p>
24             <p class="comment">いいい</p>
25         </div>
26     </div>
27 </div>
28</div>
29<div class="staff_contents2">
30<div class="staff_left">
31     <div class="staff_flexbox">
32         <div class="box1">
33             <img src="">
34         </div>
35         <div class="box2">
36             <p class="name">ううう</p>
37             <hr>
38             <p class="job">ううう</p>
39             <p class="comment">ううう</p>
40         </div>
41     </div>
42 </div>
43</div>

css
1.staff_contents , .staff_left , .staff_right{
2	background-color: #fff;
3	border-radius: 12px;
4	padding: 25px 15px;
5 }
6.staff_contents2{
7	display: flex;
8	width: 100%;
9	text-align: center;
10	margin-top: 10px;
11}
12.staff_contents2 .staff_contents , .staff_left , .staff_right{
13	width: 50%;
14}
15.staff_left{
16	margin: 0 20px 10px 0;
17}
18.staff_right{
19	margin-bottom: 10px;
20}
21 .staff_contents img {
22	 width: 200px;
23 }
24 .staff_flexbox {
25  display: flex;
26 }
27 .box1 {
28  width: 40%;
29  margin: auto;
30	 text-align: center;
31 }
32 .box2 {
33  width: 60%;
34  margin: auto .5rem;
35 }
36.name{
37	font-size: xx-large;
38	font-weight: bold;
39	color: #ec9826;
40	text-align: center;
41	margin: 10px 0 -20px;
42}
43.job{
44	font-size: large;
45	font-weight: bold;
46	text-align: center;
47}
48.comment{
49	text-align: center;
50}
51hr {
52   border-width: 1px 0px 0px 0px;
53   border-style: solid;
54	border-width: 1px;
55   border-color: #ecbf37;
56}

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

回答2件

ベストアンサー

.staff_left , .staff_right の幅を 50% にしてますが、.staff_left に右マージン20pxを設定してますね。２つの並んだ場合はその分親要素からはみださないように縮小します。Flexboxの仕様です。
一つだけならはみ出さないので純粋に50%の幅になります。

下記のように.staff_left , .staff_right の幅をマージン分引いたものにすれば同じサイズになります。
あと、ボーダーやパディングの幅も含めてサイズを計算するように box-sizing: border-box;を設定する必要もあります。

css
1.staff_left , .staff_right {
2    width: calc(50% - 10px); 
3    border: 1px solid;
4    box-sizing: border-box;
5}

他の人の回答にもありますが、このような場合はGridの方が簡単ですね。

投稿2020/10/16 08:49

編集2020/10/16 08:50

hatena19

総合スコア34075

kama_111

2020/10/16 14:11

書いていただいたcssを入れると一発で綺麗に並びました！何が問題なのかもわからず時間もなかったので教えていただき助かりました。後からGridで書き直したいと思います。ありがとうございました！

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

こんばんは。

グリッドレイアウトの方がいいかもしれません。

サンプル

css
1body{
2  display:grid;
3  grid-template-columns: auto auto;
4}

html
1<div class="staff">
2     <div class="staff_flexbox">
3         <div class="box1">
4             <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=">
5         </div>
6         <div class="box2">
7             <p class="name">あああ</p>
8             <hr>
9             <p class="job">あああ</p>
10             <p class="comment">あああ</p>
11         </div>
12     </div>
13 </div>
14<div class="staff">
15     <div class="staff_flexbox">
16         <div class="box1">
17             <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=">
18         </div>
19         <div class="box2">
20             <p class="name">いいい</p>
21             <hr>
22             <p class="job">いいい</p>
23             <p class="comment">いいい</p>
24         </div>
25     </div>
26 </div>
27<div class="staff">
28     <div class="staff_flexbox">
29         <div class="box1">
30             <img src="http://placehold.jp/24/cc9999/993333/150x100.png?text=">
31         </div>
32         <div class="box2">
33             <p class="name">ううう</p>
34             <hr>
35             <p class="job">ううう</p>
36             <p class="comment">ううう</p>
37         </div>
38     </div>
39 </div>