演習課題「ネガティブフリースペースを配分しよう」
現在、ブラウザでは、ネガティブフリースペースという余剰が生じ、box3がフレックスコンテナのアウトラインからはみ出して表示されています。
ここで、flexプロパティを用いて、このネガティブフリースペースをbox_2クラスとbox_3クラスへ2:1で配分してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃04:フレックスアイテムの縮小比
このチャプターでは、フレックスアイテムの縮小比について学習します。
フレックスアイテムをベースサイズで並べたときの横幅よりも、フレックスコンテナが小さい場合はネガティブフリースペースという余剰が生じます。flexプロパティの2番目に指定する値である縮小比が設定されていると、そのネガティブフリースペースがそれぞれのフレックスアイテムで指定した縮小比の比率によって分割されて、それぞれのフレックスアイテムから差し引かれるようになります。
ただし、縮小比が0のフレックスアイテムに対してはネガティブフリースペースは配分されません。
また、縮小比についてはflex-shrinkプロパティを使って、縮小比単体の値を指定することもできます。
なお、縮小比の初期値は0です。
@charset "UTF-8";
.container{
display: flex;
width: 900px;
outline: dashed 5px greenyellow;
}
.container div {height: 100px;}
.box_1 {
flex: 0 0 400px;
background-color: aqua;
}
.box_2 {
flex: 0 1 400px;
background-color: yellow;
}
.box_3 {
flex: 0 2 400px;
background-color: silver;
}