【CSS】扱いやすいレスポンシブでの横並びの方法

レスポンシブサイトの作成の際にメンテナンスのしやすいflexboxを使用した横並びの方法を紹介します。

HTML

html

<div class="works-inner-items flex">
            <div class="works-inner-item">
                <a href="img/難波.jpg" data-lightbox="group" data-title="No.1" >
                <img src="img/難波.jpg" alt="難波">
                </a>
                <h2 class="font-title">NAMBA</h2>
            </div>
            <div class="works-inner-item">
                 (省略)
            </div>
            <div class="works-inner-item">
                 (省略)
            </div>
             <div class="works-inner-item">
                 (省略)
             </div>
             <div class="works-inner-item">
                 (省略)
             </div>
             <div class="works-inner-item">
                 (省略)
             </div>

css

css

.works-inner .works-inner-items {
  width: 90%;
  margin-top: 8rem;
  display: flex;
  flex-wrap: wrap;
}

.works-inner .works-inner-items .works-inner-item {
  padding: 1rem;
  width: 30%; //親要素 width: 90% に対して、3分割
}

@media (max-width: 1024px) {
  .works-inner .works-inner-items .works-inner-item {
    width: 50%;
  }
}

@media (max-width: 600px) {
  .works-inner .works-inner-items .works-inner-item {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
}

コードの説明

必要なプロパティはたった3つです。

・box-sizing: border-box

paddingとborderの幅を要素の幅と高さに含めるというコードです。
要はボックスの内側にborder、paddingが入ります。

・display: flex

並べたい要素の親要素に対して指定すると直下の要素を横並び(並列)します。
念のためにIEのベンダープレフィックスを入れましょう。

・ flex-wrap: wrap

display: flexで横並びさせた要素を回り込みさせます。

例えば、横並びの列数を2列、子要素のボックスを50%とした場合に子要素が4つあると
200%( 50% × 4つの要素 )になるためWidthを無視して横方向に4つ並んでしまいます。
これを解除して子要素が100%を超えた場合は回り込むようになります。
念のためにIEのベンダープレフィックスを入れましょう。

media screeでブレイクポイント、widthで並び数、paddingで各要素のクリアランスなどを調整して使ってください。