演習課題「フレックスアイテムの間に余白を適用しよう」
現在、ブラウザでは、フレックスアイテムが隙間なく表示されています。
ここで、gapプロパティを用いて、フレックスアイテムの間に50pxの余白を適用してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃05:フレックスアイテムの間隔(gap)
このチャプターでは、フレックスアイテムの間隔について学習します。
gapプロパティをフレックスコンテナで使って値に大きさを指定すると、フレックスアイテムの間に指定した大きさの余白を挿入できます。
余白は横だけではなく、フレックスアイテムを複数行で表示した場合には、縦にも同じ大きさの余白が挿入されるようになります。row-gapプロパティを使うと縦の余白の大きさを、column-gapプロパティを使えば横の余白の大きさをそれぞれ個別に指定できます。
また、gapプロパティ1つでも縦横それぞれの空白を個別に指定することができ、1番目の値が縦幅の空白を、2番目の値が横幅の空白を定義しています。
ちなみに、フレックスアイテムの間に挿入した余白はフリースペースの分割を受け取りません。
@charset "UTF-8";
.container{
display: flex;
gap: 30px;
width: 900px;
margin-bottom: 20px;
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;
}