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

Question

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

Answer

ECマスターズの土屋です。

>パソコンページでは画像の並びを
>□ □ □ □

こちらのフォーマットで横並びにする際は
親要素に「display: flex;」を指定する必要が
ございます。
(例)

    ul {
        display: flex;
        justify-content: space-between;
    }

    
        
        
        
        
    
また上記の様に、flexを指定したのみでは
等間隔で余白を取る事が出来ない為
「justify-content: space-between;」
を指定して頂けますと余白を取る事が出来ます。

>スマートフォンでは
>□ □
>□ □

こちらのフォーマットで横並びにしたい場合は
親要素に幅を指定し「flex-wrap: wrap;」を
指定する必要がございます。
(例)

    ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 120px;
    }
    li {
        list-style-type: none;
        width: 50px;
        height: 50px;
        margin-top: 10px;
        background-color: red;
    }


    
    
    
    


要素の横並びに関しましては、flex以外にも
様々な方法で横並びにする方法がございますが

flexで横並びにする方法が最善ですので
是非こちらを参考にして頂けますと幸いです。

参考までにflex以外の方法で要素を横並びにする方法
を紹介されているサイトがございましたので
是非こちらも参考にして頂けますと幸いです。
https://creive.me/archives/13552

Answer

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

Answer

ECマスターズの土屋です。

>１枚のhtmlで行い横幅768px以下の場合は
>□ □
>□ □
>横幅768px以上の場合は
>□ □ □ □
>と画像を表示したいのですが教えていただいた記述でできるんでしょうか。

こちらですが、「flex-wrap」
プロパティを指定することによって
親要素の幅によってレイアウトを自動で変更する
プロパティがございます。
「flex-wrap」プロパティの様々なご利用
方法は下記のサイトをご参考にして頂けますと幸いです。

実際の記述方法の一つとして下記の方法も
お試し頂ければ幸いです。
(例)

    ul {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }
    li {
        list-style-type: none;
        width: 300px;
        height: 200px;
        margin-top: 10px;
        background-color: red;
        box-sizing: border-box;
    }



    
        
        
        
        
    


引き続きどうぞよろしくおねがいします。