【初心者でもわかる】いちょう切り。part1（4つの要素を2×2に並べる方法-flexbox編-）

どうも、7noteです。今回はflexboxを使っていちょう切り、やって行こうと思います。

「♪〜〜（オープニング曲が流れる）」
「7noteクッキングレッスンへようこそ！」
「今回はオレンジを使っていちょう切りをマスターしましょう。」
「全2パートあるので、みなさん最後までついてきてください。」

最終完成予定イメージ

今回の材料はこちら(1人前)

ファイル	CSSプロパティ	意味
index.html
style.css	width: ~~; display: flex; flex-wrap: wrap;	横幅を設定フレックスボックスの設定端までいったら改行させる
orange_01.png		オレンジの画像（左上）
orange_02.png		オレンジの画像（右上）
orange_03.png		オレンジの画像（左下）
orange_04.png		オレンジの画像（右下）

作り方

index.htmlに4枚のオレンジの画像を用意

style.cssで、2×2に画像を並べる

それぞれの間に隙間を作って完成！（part2で作ります。）

1. index.htmlに4枚のオレンジの画像を用意

index.html

<div class="dish">
    <img src="orange_01.png" alt="オレンジ左上">
    <img src="orange_02.png" alt="オレンジ右上">
    <img src="orange_03.png" alt="オレンジ左下">
    <img src="orange_04.png" alt="オレンジ右下">
</div>

2. style.cssで、2×2に画像を並べる

style.css

    .dish {
        width: 400px; /*200pxの画像を2×2で並べるので400pxを指定*/
        display: flex; /*子要素を横並びにさせます。*/
        flex-wrap: wrap; /*並べたコンテンツが親要素からはみでたら、次の行にコンテンツを改行させる*/
    }