[css] flexを使った画像の並びについて

Question

パソコンページでは画像の並びを□ □ □ □スマートフォンでは□ □□ □という風に表示したいのですがうまくいきません。flexを使って横並びにしているので何か良い記述方法があれば教えてください。

Answer

ECマスターズの土屋です。>パソコンページでは画像の並びを>□ □ □ □こちらのフォーマットで横並びにする際は親要素に「display: flex;」を指定する必要がございます。(例)

また上記の様に、flexを指定したのみでは等間隔で余白を取る事が出来ない為「justify-content: space-between;」を指定して頂けますと余白を取る事が出来ます。>スマートフォンでは>□ □>□ □こちらのフォーマットで横並びにしたい場合は親要素に幅を指定し「flex-wrap: wrap;」を指定する必要がございます。(例)

要素の横並びに関しましては、flex以外にも様々な方法で横並びにする方法がございますがflexで横並びにする方法が最善ですので是非こちらを参考にして頂けますと幸いです。参考までにflex以外の方法で要素を横並びにする方法を紹介されているサイトがございましたので是非こちらも参考にして頂けますと幸いです。https://creive.me/archives/13552

Answer

>> ECマスターズ土屋様返信ありがとうございます。１枚のhtmlで行い横幅768px以下の場合は□ □□ □横幅768px以上の場合は□ □ □ □と画像を表示したいのですが教えていただいた記述でできるんでしょうか。最初の質問の説明が足りず申し訳ありません。

Answer

ECマスターズの土屋です。>１枚のhtmlで行い横幅768px以下の場合は>□ □>□ □>横幅768px以上の場合は>□ □ □ □>と画像を表示したいのですが教えていただいた記述でできるんでしょうか。こちらですが、「flex-wrap」プロパティを指定することによって親要素の幅によってレイアウトを自動で変更するプロパティがございます。「flex-wrap」プロパティの様々なご利用方法は下記のサイトをご参考にして頂けますと幸いです。実際の記述方法の一つとして下記の方法もお試し頂ければ幸いです。(例)

引き続きどうぞよろしくおねがいします。

[css] flexを使った画像の並びについて

カテゴリーから探す