why
カードデザインを並べる時、はみ出しの折り返しが咄嗟に出てこなかった。
なのでまとめておく。
結論
前提
- display flex が適用されている
- カードが左から右に流れ、画面をはみ出している
この状況の時に、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>
- 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;
}
背景色
まずみやすくするために背景をつける。
手前側に来るに従って
000 -> 111 -> 222
と色が薄くなるようにする
カードを包むコンテナのサイズ
margin: 0 auto;
padding: 0;
- 上下マージン 0
- 左右マージン 自動中央揃え
- パディング 0
これでみっちりしたコンテナを作る。
折り返しがあるので、みっちりさせないと違和感が出る。
角は丸めておく。Zoom 準拠
カードを包むコンテナの秩序
前提として flex を使う。
デフォルトなので右に流れていく。
通常だと画面を超えていく。
flex-wrap: wrap;
なので flex-wrap を使う。
これによって画面のサイズに収まらないカードが出た場合、
画面からはみ出ず、自動的に下に流れてくれる。
Top comments (0)