【初心者でもわかる】いちょう切り。part2（2×2に並べた要素に隙間を作る-flexbox編-）

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

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

「・・・（CM明け）・・・」
「さて、4等分にしたオレンジを並べるのはできたでしょうか？」
「上手くできなかった、という方はコメントくださいね！」
「ここからは、2×2に並べたオレンジに隙間を作っいきます。」
「ラストスパートがんばっていきましょう！」

最終完成予定イメージ

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

ファイル	CSSプロパティ	意味
index.html
style.css	background: ~~; justify-content:space-between; display: inline-block; margin: ~~;	背景の色を設定横並びを等間隔に設定隙間を当てるため隙間を設定
orange_01.png		オレンジの画像（左上）
orange_02.png		オレンジの画像（右上）
orange_03.png		オレンジの画像（左下）
orange_04.png		オレンジの画像（右下）

作り方

前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。

5pxの縦線の隙間を作ります。（垂直方向の隙間）

5pxの横線の隙間を作ります。（水平方向の隙間）

見えない隙間に注意して完成！

1. 前回part1で作ったindex.htmlを用意。見やすいように背景に色を入れます。

style.css

.dish {
    width: 400px;
    display: flex;
    flex-wrap: wrap;

    /*--ここから下を追加--*/
    background: #CCC; /*見やすいように背景色を指定*/
}

2. 5pxの縦線の隙間を作ります。（垂直方向の隙間）

今回は親要素（dish）の横幅を広げて簡単に行いますが、親要素が動かせない時は、子要素の大きさを変更して対応しましょう。
子要素の大きさを変えてやる方法はまたいつか記事書こうかな。

style.css

.dish {
    width: 405px; /*400pxから405pxに変更*/
    display: flex;
    flex-wrap: wrap;
    background: #CCC;

    /*--ここから下を追加--*/
    justify-content: space-between; /*要素を左右均等に水平方向に並べる*/
}

3. 5pxの横線の隙間を作ります。（水平方向の隙間）

style.css

/*--ここから下を追加--*/

.dish img {
    display: inline-block; /*marginを当てるために必要*/
    margin-bottom: 5px; /*下方向に5pxの隙間を作成*/
}

4. 見えない隙間に注意して完成！

ぱっと見できてそうに見えるが、これでは綺麗なコーディングとは呼べません！
一工夫しましょう！
今起きている問題はここです。

オレンジ色の部分がmarginです。
03と04（オレンジの下半分）にもmargin-bottomがついてしまっているので、
01と02にだけborder-bottomが効くように変えてみましょう。

style.css

.dish img {
    display: inline-block; /*marginを当てるために必要*/
}

/*--ここから下に変更--*/
.dish img:nth-child(-n+2) { /*最初から2番目にまで適応*/
    margin-bottom: 5px; /*下方向に5pxの隙間を作成*/
}