演習課題「フレックスアイテムのベースサイズを指定しよう」
現在、ブラウザでは、コンテンツ幅を横幅に持ち、高さが100pxのフレックスアイテムが横並びで表示されています。
ここで、表示されるフレックスアイテムが左から順に小さくなるように修正してください。
ただし、box_1クラスとbox_2クラス、box_3クラスのflexプロパティの値のうち、伸長比と縮小比は0、ベースサイズはそれぞれ300px、200px、100pxに指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃02:フレックスアイテムのベースサイズ
このチャプターでは、フレックスアイテムのベースサイズについて学習します。
flexプロパティを使って、フレックスアイテムの横幅を個別に調整することができます。flexプロパティの値は、ボックスの横幅を示すベースサイズを指定するだけではなく、伸長比や縮小比という値も指定する必要があり、伸長比、縮小比、ベースサイズの順に値を指定する必要があります。
こうして指定したフレックスアイテムは、それぞれ指定したベースサイズの値で横に並べられ、ベースサイズの横幅の合計がフレックスコンテナよりも大きい場合は伸長比、小さい場合は縮小比を適用することで決まります。
また、ベースサイズについてはflex-basisプロパティを使って、ベースサイズ単体の値を指定することもできます。
ベースサイズの初期値はautoで、コンテンツに合わせた幅で表示されます。
@charset "UTF-8";
.container {
display: flex;
width: 900px;
outline: dashed 5px greenyellow;
}
.container div {height: 100px;}
.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;
}