演習課題「フレックスアイテムを下から上に並べよう」
現在、ブラウザでは、左から右にbox1、box2、box3の順でフレックスアイテムが表示されています。
ここで、flex-directionプロパティを用いて、下から上へbox1、box2、box3の順でフレックスアイテムを並べてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃06:フレックスアイテムを並べる方向を指定する(flex-direction)
このチャプターでは、フレックスアイテムを並べる方向を指定する方法を学習します。
フレックスコンテナのflex-directionプロパティによって、フレックスアイテムを並べる方向である主軸を指定できます。flex-directionプロパティの初期値はrowとなっており、アイテムは左から右に順に並びます。
主なflex-directionプロパティの値として、
・ フレックスアイテムが左から右に並べられるrow
・ フレックスアイテムが右から左に並べられるrow-reverse
・ フレックスアイテムが上から下に並べられるcolumn
・ フレックスアイテムが下から上に並べられるcolumn-reverse
があります。
指定する主軸の方向を回転する形で変えることで、フレックスアイテムを処理する方向も変わるため、上下方向に並べたときのベースサイズは横幅ではなく高さを示すようになります。
@charset "UTF-8";
.container {
display: flex;
flex-direction: row-reverse;
width: 900px;
height: 900px;
outline: dashed 5px greenyellow;
}
.box_1 {
flex: 0 0 100px;
background-color: aqua;
}
.box_2 {
flex: 0 0 200px;
background-color: yellow;
}
.box_3 {
flex: 0 0 300px;
background-color: silver;
}
@charset "UTF-8";
.container {
display: flex;
flex-direction: column;
width: 900px;
height: 900px;
outline: dashed 5px greenyellow;
}
.box_1 {
flex: 0 0 100px;
background-color: aqua;
}
.box_2 {
flex: 0 0 200px;
background-color: yellow;
}
.box_3 {
flex: 0 0 300px;
background-color: silver;
}