質問: こんばんは! 先輩方に下記の件についてご教授いただきたく質問を投稿いたします。 ### 前提・実現したいこと 画像が6枚あり、上に4つ・下に2つ並べると案内図になる予定です。 (それぞれにカーソルをのせるとその場所の写真が同じページ内の別枠に表示される、というものです。 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 ``` ``` を ``` 【HTML】 【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】 【CSS】 .container { display: flex; justify-content: center; width:580px; } ``` に書き換えました。 すると画像同士の余白が埋まったのですが、今度はページが全体的に左に寄ってしまい flexboxの何が原因なのかわからず手が止まってしまい今回質問させていただきました...。 (スマホで見たら、それぞれの画像がページの横幅いっぱいに表示されてとても見づらくなっていました) 初めての質問ですので「情報が足りない」等ありましたら その点もお教えいただければ幸いです。 よろしくお願いいたします。 ### 補足情報(FW/ツールのバージョンなど) WordPress 5.0.4 (marble_child テーマ)使用
回答: flex-growで伸長率の指定をしてないから かつ、画像1だけサイズが違うので伸長率を倍に ```