Flexbox理解をするためギリシャ国旗を作りました

Flexboxを使って国旗を作る
今回はギリシャ国旗　

![スクリーンショット (56).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/cd98c447-5b49-bf68-3c6d-4ff66c3fcfec.png)




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

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

・紙とペンで実際に枠を書いてみる（添付画像　準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略

```html
<div class="greece">
      <div class="main">
        <div class="main1"></div>
        <div class="main2"></div>
        <div class="main1"></div>
      </div>
      <div class="sub">
        <div class="blue"></div>
        <div class="white"></div>
        <div class="blue"></div>
        <div class="white"></div>
        <div class="blue"></div>
      </div>
    <div class="sub1">
      <div class="white sub2"></div>
      <div class="blue sub2"></div>
      <div class="white sub2"></div>
      <div class="blue sub2"></div>
    </div>
  </div>
```
```css
.greece {
  width: 700px;
  height: 400px;
  border: 1px solid black;
  margin: 200px auto; 
}

.main {
  width: 300px;
  height: 200px;
  background-color: rgb(12, 152, 207);
}



.sub {
  width: 400px;
  height: 200px;
  background-color: blue;
}

.sub1 {
  width: 700px;
  height: 200px;
  background-color: yellowgreen;
}

```
上記の状態を一旦ブラウザで確認　↓

![スクリーンショット (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/438ef87a-773d-deff-adfd-354e17284563.png)

大枠のクラスに```display: flex;``` を付けてみます

```css
.greece {
  width: 700px;
  height: 400px;
  border: 1px solid black;
  margin: 200px auto; 
  
  display: flex; ※追加
  flex-wrap: wrap;　※追加
}
```
上記の状態を一旦ブラウザで確認　↓
大枠の完成です！

![スクリーンショット (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/a116d28f-b144-a28c-f12d-6ed42a693034.png)

`skyblue`　の部分を　`display: flex;` で十字を作っていきます


```css
.main {
  width: 300px;
  height: 200px;
  background-color: rgb(12, 152, 207);

  display: flex;　※追加
  justify-content: center;　※追加
  align-items: center;　※追加
}

.main1 {　※追加
  height: 40px;
  background-color: white;

  flex-grow: 2.5; ※
}

.main2 {　※追加
  height: 200px;
  background-color: white;

  flex-grow: 1;　※
}
```
![スクリーンショット (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/18c4662d-3cf2-1261-57d8-61749a844ec5.png)

<font color='blue'>青い部分</font> も作っていきます！！

```css
.sub {
  width: 400px;
  height: 200px;
  background-color: blue;

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

.blue { ※追加
  width: 400px;

  background-color: rgb(12, 152, 207);
  flex-grow: 2;　
}

.white {　※追加
  width: 400px;

  background-color: white;
  flex-grow: 2; 
}
```

![スクリーンショット (64).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/a89525a0-6aef-92a3-70e4-8ea6dd6016b3.png)

あともういっちょ！！

```css
.sub1 {
  width: 700px;
  height: 200px;
  background-color: yellowgreen;

  display: flex;
  flex-direction: column;
}

.sub2 {
  width: 700px;
}
```

![スクリーンショット (65).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1311071/9d647f25-1e82-6353-c00e-c331c26aedff.png)


ギリシャ国旗完成です！



## まとめ
一見難しそうに見えるギリシャ国旗も、一つずつcodeを書いていけば完成します
水色と白の横線は`display: flex`　を付けなくても完成しますが
`Flexアイテム`を使用したかったので`display: flex`　を使用しました。

また別の書き方があればそちらも採用したいと思います
こんなcodeもあるよ！と教えていただける方ご連絡いただけたら嬉しいです

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