演習課題「フレックスアイテムを複数行にわたって表示しよう」
現在、ブラウザでは、フレックスアイテムがフレックスコンテナからはみ出して表示されています。
ここで、フレックスアイテムを複数行にわたってフレックスコンテナの中に表示されるように修正してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
演習課題「複数行のフレックスアイテムをフレックスコンテナと同じ横幅で表示しよう」
現在、ブラウザでは、フレックスアイテムが複数行にわたって表示されていますが、それぞれの行にポジティブフリースペースとネガティブフリースペースが発生しています。
ここで、フレックスコンテナと同じ横幅で表示されるように伸長比と縮小比をそれぞれのフレックスアイテムに適用してください。
ただし、box_1クラスとbox_2クラスの伸長比をそれぞれ2と3に、box_3クラスの縮小比を1に指定してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
＃07:フレックスアイテムをマルチライン表示する(flex-wrap)
このチャプターでは、フレックスアイテムをマルチライン表示する方法を学習します。
flex-wrapプロパティをフレックスコンテナで使うと、どのようにフレックスアイテムを複数行に折り返して表示するかを指定できます。flex-wrapプロパティの初期値は、フレックスアイテムを1行で表示するnowrapとなっていますが、その値をwrapにすることで、フレックスアイテムを複数行で表示できるようになります。
複数行で表示する場合は、まずフレックスアイテムをベースサイズで指定した横幅にして並べます。この状態でフレックスコンテナの横幅に収まらないフレックスアイテムがあったら、そこから新しい行を下方向に追加して、そのフレックスアイテムから並べます。
こうしてすべてのフレックスアイテムが収まったら、行ごとにフリースペースを算出して、その行に位置しているフレックスアイテムに対して伸長比や縮小比の処理を実行します。
@charset "UTF-8";
.container {
display: flex;
flex-wrap: wrap;
width: 900px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.container div {height: 100px;}
.box_1 {
flex: 0 0 200px;
background-color: aqua;
}
.box_2 {
flex: 0 0 400px;
background-color: yellow;
}
.box_3 {
flex: 0 0 1000px;
background-color: silver;
}
@charset "UTF-8";
.container{
display: flex;
flex-wrap: wrap;
width: 900px;
margin-bottom: 20px;
outline: dashed 5px greenyellow;
}
.container div {height: 100px;}
.box_1 {
flex: 1 0 200px;
background-color: aqua;
}
.box_2 {
flex: 1 0 400px;
background-color: yellow;
}
.box_3 {
flex: 0 1 1000px;
background-color: silver;
}