flex-wrapで叶える！レスポンシブデザイン編

最近勉強中のCSSで知らないプロパティとよく遭遇するのですが、その中で便利だな〜と思った flex-wrap を解説していきます。

概要

フレックスボックスを使って横並びにした要素を、スマートフォンでは縦並び表示に変えていきます。

boxを並べる

まずはこんな感じでボックスを作って並べていきます。cssファイルにはborderとwidth , height　を設定してあります。

test.html

<div class='container'>
    <div class='box'>
       box
    </div>
    <div class='box'>
       box
    </div>
    <div class='box'>
       box
    </div>
    <div class='box'>
  　    box
    </div>
</div>

PC表示

フレックスボックスを使って要素を横並びにする

test.css

.box {
   border: 3px blue solid;
   width: 20%;
   height: 100px;
}

.container {
   margin: 0 auto;
   width: 80%;
   display: flex;
   justify-content: space-between;
} 

marginで要素を中央揃えに、widthで両端にスペースを設けています。親要素に display: flex; を置くことでbox達をflex-itemにして横並びにし、justify-contentプロパティでいい感じに隙間を持たせました。これで要素の横並びが完成です。

レスポンシブデザインに対応させる

今のままだとスマートフォンで見たときにboxが横に並んで見づらいので、スマホでは縦に並べるようにしていきましょう。メディアクエリでレスポンシブ対応にしていきます。

test.css

@media (max-width:480px) {
   .container {
       flex-wrap: wrap;
   }

   .box {
       width: 100%;
   }
}

親要素に flex-wrapを設定して flex-itemの横幅を100%にします。

flex-wrap : 並べたい要素の幅がコンテナの幅を超える場合にはみ出した部分を折り返してくれます。この場合、１００％だと確実に２つめのboxははみ出るので縦方向に並んで行きます。ちなみに初期値はnowrapで折り返されずに幅が縮んで１列におさまります。

まとめ

これで簡単に横並びだった要素を縦並びのレスポンシブデザインにかえることができました！マルチカラム編も書こうと思っているのでスキを押してもらえるとがんばれます！

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

こっちでもブログかいてます！プログラミング・旅などなど。

AKlog