演習課題「フレキシブルボックスレイアウトを適用しよう」
現在、ブラウザでは、3つのボックスが縦に表示されています。
ここで、box_0クラスのボックスをフレックスコンテナにすることで、フレキシブルボックスレイアウトを適用し、3つのボックスを横に並べてください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
※コードの2行目以降に@charset "UTF-8";が記述されていると、左側に×と表示されることがあります。これは本来@charset "UTF-8";を1行目に記述すべきだと知らせているものです。採点には問題ありませんが、ブラウザによってはCSSが正しく表示されないことがあるため1行目に記述するとよいでしょう。
※有料会員になるとこの動画をご利用いただけます
詳しい説明を読む
＃01:フレキシブルボックスレイアウト(flex)
このチャプターでは、フレキシブルボックスレイアウトについて学習します。
フレキシブルボックスレイアウトとは、あるボックスの子要素を水平または垂直にレイアウトするだけではなく、横幅や高さを自由に調整できる1次元のレイアウト方法です。displayプロパティの値にflexを指定すると、その要素はフレックスコンテナというボックスを構成します。
その際、子要素はフレックスアイテムというボックスとなり、コンテンツに合わせた横幅で横並びで表示されます。また、フレックスアイテムはwidthプロパティや heightプロパティを使って大きさを調整することもできます。
@charset "UTF-8";
.container {display: flex;}
.box_1 {background-color: aqua;}
.box_2 {background-color: yellow;}
.box_3 {background-color: silver;}