演習課題「フレックスアイテムを下寄せで表示しよう」
現在、ブラウザでは、フレックスアイテムがそれぞれ指定した高さが反映されず、均一の高さで並んで表示されています。
ここで、それぞれ高さの異なるフレックスアイテムを下寄せで表示するように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃09:交差軸の位置ぞろえ(align-items)
このチャプターでは、交差軸の位置ぞろえについて学習します。
フレックスアイテムはそのアイテム内のコンテンツによって高さが変化します。その高さの違いで生じるスペースを活用して交差軸の位置ぞろえを調整するプロパティとして align-itemsプロパティがあり、フレックスコンテナで使うことで位置ぞろえを調整できるようになります。
なお、align-itemsプロパティの初期値は後述するstretchで、高さを均一にした状態で表示されます。
主なalign-itemsプロパティの値として、
・ 最も高さの大きいフレックスアイテムに高さをそろえるstretch
・ 高さを均一にしないで上寄せで表示するflex-start
・ 高さを均一にしないで下寄せで表示するflex-end
・ 高さを均一にしないで中央寄せで表示するcenter
があります。
また、フレックスアイテムにalign-selfプロパティを用いると、それぞれのフレックスアイテムで個別に位置ぞろえを指定することができます。
@charset "UTF-8";
div {width: 300px;}
.container {
display: flex;
align-items: flex-start;
width: 1000px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.box_1 {
min-height: 50px;
background-color: aqua;
}
.box_2 {
min-height: 150px;
background-color: yellow;
}
.box_3 {
min-height: 100px;
background-color: silver;
}
@charset "UTF-8";
div {width: 300px;}
.container {
display: flex;
align-items: center;
width: 1000px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.box_1 {
min-height: 50px;
background-color: aqua;
}
.box_2 {
min-height: 150px;
background-color: yellow;
}
.box_3 {
min-height: 100px;
background-color: silver;
}