Flexboxの基礎を徹底的な理解のために中央アフリカ共和国の国旗を作ってみる

Flexboxを使って国旗を作る
今回は中央アフリカ共和国の国旗　
黄色の星は省きます

![スクリーンショット (77).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/569bc096-a6ee-6d2d-9793-48ac66838fbe.png)



目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
[Css Flexboxのチートシート] (https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)

～codeを書き始める前の準備～
・構成を考える！　何をどんな風に、どうやって作るのか？
　最初にある程度決めておくと後が楽になります。
　例　中央アフリカ国旗を調べる
　　　```<div>```は何個必要なのか？
　　　```class```属性名はどうしようか？
　　　

ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html 

      <div class="african1">
        <div class="afr">
            <div class="africa afr3">box1</div>
            <div class="africa afr4">box2</div>
            <div class="africa afr5">box3</div>
            <div class="africa afr6">box4</div>         
        </div>
        <div class="afr1">box5</div>
        <div class="afr">
          <div class="africa afr3">box1</div>
          <div class="africa afr4">box2</div>
          <div class="africa afr5">box3</div>
          <div class="africa afr6">box4</div>         
      </div>
      </div>

```

```css

.african1 {
  width: 450px;
  height: 300px;
  background-color: pink;
  border: 1px solid black;
}

.afr3 {
  width: 185px;
  background-color: blue;
}

.afr4 {
  background-color: white;
}

.afr5 {
  background-color: green;
}

.afr6 {
  background-color: yellow;
}

.afr1 {
  width: 30px;
  background-color: red;
}
```

この状態を一旦ブラウザで確認　↓

![スクリーンショット (85).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/cd817aac-77a0-f25c-10fa-f2d6a63786d1.png)


この状態に`Flexbox` の`displaybox`をつけます

```css
.african1 {
  width: 450px;
  height: 300px;
  background-color: pink;
  border: 1px solid black;

  display: flex; ※追加
  flex-direction: row; ※追加
}
```

boxが横並びになりました　↓↓

![スクリーンショット (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/e78a02f6-84a5-c1c3-2378-cf77a38e11cf.png)


次に『box1,2,3,4　＆　.afr 』にFlexアイテム（子要素）をつけるため
『box1,2,3,4』の親要素に`display: flex`と`flex`コンテナー（親要素）をつけます

```css

.afr {

  display: flex; ※追加
  flex-direction: column; ※追加
}
```

`flex-direction: column;` をつけたので変化なし


![スクリーンショット (86).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/01b76b9e-f6a5-79ec-a7a5-aa93d676ac86.png)


『.afr3,4,5,6,1』にFlexアイテムの　`flex-grow` をつけます

```css

.afr {
  display: flex;
  flex-direction: column;
}

.afr3 {
  width: 185px;
  background-color: blue;
  flex-grow: 2;
}
.afr4 {
  background-color: white;
  flex-grow: 2;
}
.afr5 {
  background-color: green;
  flex-grow: 2;
}
.afr6 {
  background-color: yellow;
  flex-grow: 2;
}

.afr1 {
  width: 30px;
  background-color: red;

  flex-grow: 1;
}
```

`flex`コンテナー　と、`flex`アイテム　を使って完成しました！

![スクリーンショット (88).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/2ee677d0-a9eb-f2c8-74f6-3c0a2c2de3b6.png)


最後に「文字」を消して完成です ↓

![スクリーンショット (82).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/570576f0-d3a5-75d1-5fcf-0c5c82c27b4b.png)

##まとめ

`Flexコンテナー`　と　`Flexアイテム`　の両方を使用しました。
`Flexアイテム`　を使うため、敢えて『親要素』に`Flexコンテナー`を使いました

`Flexアイテム`　を使うためには`display: flex;` を付ける必要があります
見落としがちで、`display: flex;`　を付けずに　`Flexアイテム`　を付けてしまい
挙動が反応しない現象に陥ってしまうので注意が必要です


引き続き`Flexbox` の基礎を理解して自由に使えたら嬉しいです

今回は以上です！
ありがとうございました