0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-04-06

レスポンシブサイトの作成の際にメンテナンスのしやすい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で各要素のクリアランスなどを調整して使ってください。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?