幅の条件と組み合わせる

01 / 05

道具が2つそろった

上級編で覚えた「幅で切り替える」と、この章で覚えた「親が並べる」。この2つはそのまま重ねて使えるよ。

@media の中に display: flex; や flex-wrap を書くだけ。新しい書き方は出てこない。

02 / 05

広い画面では1行に並べたい。でも狭い画面では折り返してほしい。そういうときは flex-wrap を @media の中に置くよ。

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

03 / 05

広いときは両端、狭いときはまん中。justify-content の値を幅ごとに変えるだけで、印象はずいぶん変わる。

どこを変えるかは1つずつ決めていこう。ぜんぶ変えると読めなくなるよ。

.header {  display: flex;  justify-content: space-between;}@media (max-width: 670px) {  .header {    justify-content: center;  }}

04 / 05

折り返しを許したうえで子を width: 100%; にすると、1枚ずつ縦に積まれたような並びになる。

折り返しの力を借りて縦積みにする、よくある形だよ。

@media (max-width: 670px) {  .card {    width: 100%;  }}

05 / 05

プレビューの幅を境目の前後で行き来させて、切り替わる瞬間を見るのがいちばんの確認方法。

ここから書いてみよう。