CSS
LINEでログイン
Googleでログイン
Twitterでログイン
問題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を書き換える必要がなくなるので非常に便利です。
完了にする！
活動記録をTweetする
スマホなどの画面が小さいデバイスでWebサイトを見た時に、デザインが崩れて表示されてしまうことがあります。
特に多いのが、フレックスボックスで横並びに表示している要素が画面が小さくなったことでくっついて表示されてしまうことがあります。
レスポンシブの設定でflex-directionを書いておくことでこのような問題を回避することができます。