入りきらない子は折り返す

01 / 05

はじめは「1行に押しこむ」

display: flex; の子は、幅が足りなくても次の行へは行かない。全員で縮んで、無理やり1行に収まろうとするんだ。

カードを6枚並べると、1枚ずつがぺしゃんこになってしまう。

02 / 05

親に flex-wrap: wrap; と書くと、入りきらない子は次の行へ送られる。

書くのはやっぱり親のほう。子は何も知らなくていいよ。

.cards {  display: flex;  flex-wrap: wrap;}

03 / 05

「3個で折り返す」と書くわけではない。親の幅と子の幅から自動で決まるんだ。

親が 480px、子が 150px なら3個。親が狭くなれば2個、もっと狭ければ1個。

数を決めていないから、幅が変わっても勝手に付いてくるよ。

.cards {  width: 480px;}.card {  width: 150px;}

04 / 05

子どうしをくっつけたくないときは、子に margin を書く。折り返したあとの行との間も同じようにあけられるよ。

すき間を足すと1行に入る数が減るので、そこだけ気をつけよう。

.card {  width: 140px;  margin: 0 8px 8px 0;}

05 / 05

折り返しを許しておくと、画面が狭くなったときに勝手に段が増える。@media を書かなくても対応できる場面があるんだ。

ここから書いてみよう。