狭い画面では縦に積む

01 / 05

並ぶ向きも親が決められる

display: flex; は最初から「横に並べる」動きをしていた。じつはこれ、向きが row（横）に決まっているというだけなんだ。

向きは親で変えられるよ。

02 / 05

flex-direction: column; と書くと、子は上から下へ並ぶ。

横並びのために書いたCSSを、値ひとつで縦並びに切り替えられるということだよ。

.cards {  display: flex;  flex-direction: column;}

03 / 05

div はもともと縦に積まれるのに、なぜわざわざ column と書くのか。理由は幅で切り替えられるから。

広いときは row、狭いときは column。同じ親の同じプロパティを書きかえるだけで済むんだ。

@media (max-width: 670px) {  .cards {    flex-direction: column;  }}

04 / 05

横並びのときは左右のすき間、縦積みのときは上下のすき間が要る。margin の向きも一緒に変えよう。

幅の指定は消していい。縦のときは横いっぱいに広がるのが自然だよ。

@media (max-width: 670px) {  .card {    margin: 0 0 8px;  }}

05 / 05

この章でやったことを並べると、

画面の並べ方はもう自由に決められる。ここから書いてみよう。