ログイン
問題14

【flex-direction】レスポンシブに対応する

flex-directionとは、フレックスボックスを使って横並びにしていたものを、縦並びに戻すためのプロパティです。これはレスポンシブ(スマホ対応)に欠かせない機能なので覚えておきましょう。

アイコン画像

問題14:【flex-direction】レスポンシブに対応する

横並びの要素を縦並びに戻してみましょう。

エディターのアイコンあらかじめエディタに書くコード

                <div class="boxs">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
¥HTML¥
              
                .boxs {
  width: 300px;
  background: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  justify-content: space-around;
}

.box {
  width: 100px;
  height: 100px;
  background: black;
}
¥CSS¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              .boxs {
  width: 300px;
  background: white;
  border: 1px solid black;
  padding: 20px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
}
¥CSS¥
            

コメントのアイコン解説

flex-directionの値にcolumn(列)を指定することで要素を縦並びに指定することができます。
スマホなどの画面が小さいデバイスでWebサイトを見た時に、デザインが崩れて表示されてしまうことがあります。
特に多いのが、フレックスボックスで横並びに表示している要素が画面が小さくなったことでくっついて表示されてしまうことがあります。
レスポンシブの設定でflex-directionを書いておくことでこのような問題を回避することができます。
ログインして解答を見る

コメントのアイコン補足

flex-directionには他にも要素をリバース表示させる値なども用意されています。通常であれば左から右に並ぶ要素を右から左へと並び変える事が可能です。
わざわざHTMLを書き換える必要がなくなるので非常に便利です。
CSSを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる