DEV Community

kaede
kaede

Posted on

HTML CSS 基礎 Part 02 -- カードの折り返しを設定する

why

カードデザインを並べる時、はみ出しの折り返しが咄嗟に出てこなかった。
なのでまとめておく。

結論

前提

  1. display flex が適用されている
  2. カードが左から右に流れ、画面をはみ出している

この状況の時に、flex-wrap: wrap を適用する。
すると画面右にはみ出していたカードが下に出る。

コードと解説は下記


html

<body>
  <div class="container">
    <div class="card">
      card1
    </div>
    <div class="card">
      card2
    </div>
    <div class="card">
      card3
    </div>
    <div class="card">
      card4
    </div>
    <div class="card">
      card5
    </div>
  </div>

</body>
Enter fullscreen mode Exit fullscreen mode
  • container
    • card1
    • card2
    • card3
    • card4

このような構造にする。


css

body {
  background-color: #000;
  color: #fff;
}
.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  background-color: #111;
  margin: 0 auto;
  padding: 0;
}
.card{
  background-color: #222;
  margin: 0 auto;
  margin: 10px;

  border-radius: 20px;
  box-shadow: 0 1px 16px;

  min-width: 248px;
  min-height: 522px;
}
Enter fullscreen mode Exit fullscreen mode

背景色

まずみやすくするために背景をつける。
手前側に来るに従って
000 -> 111 -> 222
と色が薄くなるようにする


カードを包むコンテナのサイズ

  margin: 0 auto;
  padding: 0;
Enter fullscreen mode Exit fullscreen mode
  • 上下マージン 0
  • 左右マージン 自動中央揃え
  • パディング 0

これでみっちりしたコンテナを作る。
折り返しがあるので、みっちりさせないと違和感が出る。

角は丸めておく。Zoom 準拠


カードを包むコンテナの秩序

前提として flex を使う。
デフォルトなので右に流れていく。
通常だと画面を超えていく。

  flex-wrap: wrap;
Enter fullscreen mode Exit fullscreen mode

なので flex-wrap を使う。
これによって画面のサイズに収まらないカードが出た場合、
画面からはみ出ず、自動的に下に流れてくれる。

Top comments (0)