Flexboxで作ったUAE国旗をもっとシンプルにしてみた

以前投稿した、『Flexboxの基礎を徹底的な理解のためにUAEの国旗を作ってみる』からもっとシンプルにcodeを書いたので投稿します
基盤は、以前のcodeに少しシンプルにしました

目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
Css Flexboxのチートシート

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

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

組み立てのポイント！　
『あか』と『みどり、しろ、くろ』の向きが違うのでそれぞれに親要素をつけてあげる

　　　<div class="uae11">
        <div class="uae13"></div>
        <div class="uae12">
          <div class="uae14"></div>
          <div class="uae15"></div>
          <div class="uae16"></div>
        </div>
      </div>

   .uae11 {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto; 
  }

   .uae12 { }

  .uae13 {
    background-color: red; 
  }

 .uae14 {
    background-color: green;
  }

  .uae15 {
    background-color: white;
  }

 .uae16 {
    background-color: black;
  }

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

上記のCSSにFlexboxをつける。

  .uae11 {
  width: 450px;
  height: 300px;
  border: 1px solid black;
  margin: 100px auto; 

  display: flex;　※追加
  }

 .uae12 {
     display: flex;　※追加
     flex-direction: column;　※追加

     flex-grow: 4;　※追加
   }

  .uae13 {
    background-color: red; 
    flex-grow: 1;　※追加
  }

 .uae14 {
    background-color: green;

    flex-grow: 4;　※追加
  }

  .uae15 {
    background-color: white;

    flex-grow: 4;　※追加
  }

 .uae16 {
    background-color: black;

    flex-grow: 4;　※追加
  }

結果　↓

UAE国旗完成しました！

　まとめ

以前作成したUAE国旗をもっとシンプルにしてみたら、結構簡単に作成できました
無駄なcodeをなくすととても簡単に完成できます
引き続き、シンプルかつ簡単にcodeを書けるようがんばります！！

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