blog ブログ

2023.02.01

[初心者向け][css]flexで交互に配置するレイアウト

WEB

sochan

HINODE ICT lab flexで交互に配置するレイアウト

こんにちは、デザイナーのsochanです。

日々デザインをしたり、コーディングする中で(このやり方メモしておきたいな…)
ということが出てきます。
そのうちの一つ、今回はflexで画像とテキストを交互に配置するレイアウトについてまとめました。

要素を交互にレイアウトしたい

PCの時に左右で画像とテキストが入れ替わり、
スマホに切り替わった時は上が画像、下がテキストになるようにレイアウトしたい。
(こんな感じのレイアウト↓)

HINODE ICT lab flexで交互に配置するレイアウト

しかしPCの時に左右入れ替わるようなHTMLを記述すると、
スマホ表示の際に↓のような配置になります。

HINODE ICT lab flexで交互に配置するレイアウト

PCのみだと問題ないですが、そんなわけにもいきません…
スマホで見た際にも画像とテキストを交互にし、
後々要素が増えてもPC表示、スマホ表示で影響がない記述にしたい。
その場合、flex-directionを使います。

flex-direction

実際にflex-directionを使った例。
このようなPCレイアウトがあるとします。

HINODE ICT lab flexで交互に配置するレイアウト

    
        
        <div class="box">
            <div class="text">
                 テキストテキストテキストテキストテキスト
            </div>
            <div class="img">
                <img src="sample.jpg" alt="">
             </div>
        </div>
        

        <div class="box">
            <div class="text">
                 テキストテキストテキストテキストテキスト
            </div>
            <div class="img">
                <img src="sample.jpg" alt="">
             </div>
        </div>
    
    
    

左右or上下を入れ替える記述

それぞれの奇数と偶数の要素に対してCSSを記述するとして、
PCのときの左右を入れ替えて表示する場合と、
スマホの時の上下を入れ替える場合の2パターンあります。

HINODE ICT lab flexで交互に配置するレイアウト

(1)flex-direction: row-reverse; を使った場合

PCの記述に対してのCSSに row-reverse を指定して左右を入れ替える

    
        
        box:nth-child(even){
            display: flex;
            flex-direction: row-reverse; /*左右入れ替え*/
             }
            
             @media(max-width : 750px ){
                box:nth-child(even){
                display: block;
                 }
            }
            
            box:nth-child(odd){
              display: flex;
               }
            @media(max-width : 750px ){
                box:nth-child(odd){
               display: block;
               }
              }

    
    

(2)flex-direction: column-reverse を使った場合

SPの記述に対してのCSSに column-reverse を指定して上下を入れ替える

    
        
        box:nth-child(even){
            display: flex;
             }
            
             @media(max-width : 750px ){
                box:nth-child(even){
                    flex-direction: column-reverse; /*上下入れ替え*/
                 }
            }
            
            box:nth-child(odd){
              display: flex;
               }
            @media(max-width : 750px ){
                box:nth-child(odd){
               display: block;
               }
              }

    
    

まとめ

数ある選択肢の中の一つだと思いますので、
もっといい方法あるよ!の場合は教えてください!

この部分どうしよ…と悩んでいた方のお役に立てたら幸いです。

日の出医療福祉グループ クリエイティブ室では医療・介護・保育を始めとする医療福祉業界の様々な制作を行っています。
気になった方はお気軽にお問い合わせからご相談ください。

posted article 投稿記事

  • 【初心者向け】実務で使える便利な機能5選(コーディング編)

    2024.09.12

    【初心者向け】実務で使える便利な機能5選(コーディング編)

    WEB
  • 【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    2024.06.15

    【CSS】カード型レイアウトは「flex」or「grid」どっちがいい?

    WEB
  • スライダーライブラリ「Splide」を使ってみた

    2024.04.10

    スライダーライブラリ「Splide」を使ってみた

    WEB
  • PHP7からPHP8へのバージョンアップでエラー発生?

    2024.01.30

    PHP7からPHP8へのバージョンアップでエラー発生?

    WEB
View more

contact お問い合わせ・ご相談

制作のご依頼や予算のお見積りなど、まずはお気軽にお問い合わせください。

contact