flexboxの余白の消し方

Question

こんばんは！
先輩方に下記の件についてご教授いただきたく質問を投稿いたします。

前提・実現したいこと

画像が６枚あり、上に４つ・下に２つ並べると案内図になる予定です。
(それぞれにカーソルをのせるとその場所の写真が同じページ内の別枠に表示される、というものです。

1_221×137　2_111×137　3_91×137　4_157×137
5_332×62　6_248×62

これを上記のような順で並べた上で余白なくページの真ん中に表示したいです。

発生している問題・エラーメッセージ

MTで使用していたHTMLを
WPにそのまま貼り付けたところ、
レイアウトがめちゃめちゃになりました...。

試したこと

元々のサイトのHTMLでtableタグが使用されていたので、
今後の管理がしやすい(らしい)flexboxに書き換えることに。
そこで

元のHTML

<table width="580" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img src="1の画像" width="221" height="137" onMouseOver="pic.src='1の画像の場所の写真'" /></td>
    <td><img src="2の画像" width="111" height="137" onMouseOver="pic.src='2の画像の場所の写真'" /></td>
    <td><img src="3の画像" width="91" height="137" onMouseOver="pic.src='3の画像の場所の写真'" /></td>
    <td><img src="4の画像" width="157" height="137" onMouseOver="pic.src='4の画像の場所の写真'" /></td>
  </tr>
  <tr>
    <td colspan="4"><img src="5の画像" width="332" height="62" onMouseOver="pic.src='5の画像の場所の写真'" />
<img src="6の画像" width="248" height="62" onMouseOver="pic.src='6の画像の場所の写真'" /></td>
    </tr>
</table>

を

【HTML】
<div class="flexbox">
<ul>
<li><img src="1の画像" width="221" height="137" onMouseOver="pic.src='1の画像の場所の写真'" /></li>
<li><img src="2の画像" width="111" height="137" onMouseOver="pic.src='2の画像の場所の写真'" /></li>
<li><img src="3の画像" width="111" height="137" onMouseOver="pic.src='3の画像の場所の写真'" /></li>
<li><img src="4の画像" width="111" height="137" onMouseOver="pic.src='4の画像の場所の写真'" /></li>
</ul></div>
<div class="container">
<li><img src="5の画像" width="111" height="137" onMouseOver="pic.src='5の画像の場所の写真'" /></li>
<li><img src="6の画像" width="111" height="137" onMouseOver="pic.src='6の画像の場所の写真'" /></li>
</ul></div>

【CSS】
.flexbox{
  display: flex;
  align: center;
}
.flexbox ul {
  display: -webkit-flex;
  display: flex;
  list-style: none;
}
.flexbox li {
  margin: 10px;
  padding: 20px;
  border-radius: 5px;
  line-hight: 1;
}
.flexbox li p {
  margin: 0;
  padding: 0;
}

に書き換えた所、なんとか見られる状態にはなりましたが
・画像同士に余白がありまだ見づらい
・スマホでみた際にはぐちゃぐちゃ
となっていたため、以下のように書き直してみました。

【HTML】
<div class="container">
<div class="item"><img src="1の画像" onMouseOver="pic.src='1の画像の場所の写真'" /></div>
<div class="item"><img src="2の画像" onMouseOver="pic.src='2の画像の場所の写真'" /></div>
<div class="item"><img src="3の画像" onMouseOver="pic.src='3の画像の場所の写真'" /></div>
<div class="item"><img src="4の画像" onMouseOver="pic.src='4の画像の場所の写真'" /></div>
</div>
<div class="container">
<div class="item"><img src="5の画像" onMouseOver="pic.src='5の画像の場所の写真'" /></div
<div class="item"><img src="6の画像" onMouseOver="pic.src='6の画像の場所の写真'" /></div>
</div>

【CSS】
.container {
  display: flex;
  justify-content: center;
  width:580px;
}

に書き換えました。

すると画像同士の余白が埋まったのですが、今度はページが全体的に左に寄ってしまい
flexboxの何が原因なのかわからず手が止まってしまい今回質問させていただきました...。
(スマホで見たら、それぞれの画像がページの横幅いっぱいに表示されてとても見づらくなっていました)

初めての質問ですので「情報が足りない」等ありましたら
その点もお教えいただければ幸いです。
よろしくお願いいたします。

補足情報（FW/ツールのバージョンなど）

WordPress 5.0.4 (marble_child テーマ)使用

Answer 1

flex-growで伸長率の指定をしてないから

かつ、画像１だけサイズが違うので伸長率を倍に

<div class="item"><img src="1の画像" 
↓
<div class="item col2"><img src="1の画像" 

.item{
  flex-grow:1;
}
.item.col2{
  flex-grow:2;
}

Comments

[yoppe_sun]

ご回答ありがとうございます！
なるほど、伸長率の指定ですね。
記載していただいたとおりに打ち込んだのですが、何故かうまくいかず画像1～6が縦に並び画面いっぱいに表示されるようになってしまいました。
上記のことを元に、
```CSS
.flexbox_container {
display: flex;
justify-content: center;
flex-wrap: nowrap;
flex-basis:580px;
}

.item{
flex-grow: 1;
}
.item.col2{
flex-grow: 2;
}
```
と入力してみた所、だいぶきれいにまとまりました！
(余白と画像同士のズレはまだ少しありますが....)
ここから調整し直してみたいと思います。
ありがとうございました！！