CSS
Googleでログイン
問題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には他にも要素をリバース表示させる値なども用意されています。通常であれば左から右に並ぶ要素を右から左へと並び変える事が可能です。
わざわざHTMLを書き換える必要がなくなるので非常に便利です。
わざわざHTMLを書き換える必要がなくなるので非常に便利です。
#忍者CODE無料問題集で活動を記録しよう
完了にする！
スマホなどの画面が小さいデバイスでWebサイトを見た時に、デザインが崩れて表示されてしまうことがあります。
特に多いのが、フレックスボックスで横並びに表示している要素が画面が小さくなったことでくっついて表示されてしまうことがあります。
レスポンシブの設定でflex-directionを書いておくことでこのような問題を回避することができます。