演習課題「フレックスアイテムを中央に寄せて表示しよう」
現在、ブラウザでは、フレックスアイテムが左寄せで表示されています。
ここで、フレックスアイテムを中央に寄せて表示するように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃08:主軸の位置ぞろえ(justify-content)
このチャプターでは、主軸の位置ぞろえについて学習します。
ポジティブフリースペースはフレックスアイテムへの分配以外にも、主軸の位置ぞろえでも活用されます。
その主軸の位置ぞろえをおこなうために使われるのがjustify-contentプロパティです。justify-contentプロパティの初期値は後述するflex-startで、左寄せで表示されます。justify-contentプロパティの主な値としては、
・ フレックスコンテナの開始地点に寄せて表示するflex-start
・ フレックスコンテナの終了地点に寄せて表示するflex-end
・ フレックスコンテナの中央に寄せて表示するcenter
・ 最初と最後の子要素を両端に配置して、残りの子要素が均等になるように間隔をあけて表示するspace-between
・ 余白が均等割になり、両サイドの余白のみ半分のサイズになるspace-around
があります。
@charset "UTF-8";
div {
height: 100px;
width: 300px;
}
.container {
display: flex;
justify-content: space-between;
width: 1000px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.box_1 {background-color: aqua;}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}
@charset "UTF-8";
div {
height: 100px;
width: 300px;
}
.container {
display: flex;
justify-content: space-around;
width: 1000px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.box_1 {background-color: aqua;}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}