問題
14
CSS
flex-directionでレスポンシブに対応する
flex-directionとは、フレックスボックスを使って横並びにしていたものを、縦並びに戻すためのプロパティです。これはレスポンシブ(スマホ対応)に欠かせない機能なので覚えておきましょう。
CSSの問題に挑戦しよう！
問題
「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¥
期待する画面
解答と解説（flex-directionでレスポンシブに対応する）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
flex-directionの値にcolumn(列)を指定することで要素を縦並びに指定することができます。
スマホなどの画面が小さいデバイスでWebサイトを見た時に、デザインが崩れて表示されてしまうことがあります。
特に多いのが、フレックスボックスで横並びに表示している要素が画面が小さくなったことでくっついて表示されてしまうことがあります。
レスポンシブの設定でflex-directionを書いておくことでこのような問題を回避することができます。
補足
flex-directionには他にも要素をリバース表示させる値なども用意されています。通常であれば左から右に並ぶ要素を右から左へと並び変える事が可能です。
わざわざHTMLを書き換える必要がなくなるので非常に便利です。
