Flexboxを使ってフィンランド国旗を作りました！

9612 ワード
HTML CSS 初心者 flexbox HTML テキストリンク

Flexboxを使って国旗を作る
今回はフィンランド国旗

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

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

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

<div class="finland">
      <div class="fin">
          <div class="finland1 finland4">しかく４</div>
          <div class="finland1 finland2">しかく２</div> 
          <div class="finland1 finland3">しかく３</div>
      </div>
    </div>

.finland {
  width: 700px;
  height: 500px;
  border: 1px solid black;
  margin: 500px auto;
}

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

.finland1 {
  width: 50px;
  height: 50px;
  background-color: blue;
}

.finland2 {
  height: 100%;
}

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

.finland {
  width: 700px;
  height: 500px;
  border: 1px solid black;
  /* background-color: aqua; */
  margin: 500px auto;

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

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

display: flex; で大枠をセンターにしました
次に、青い部分をdisplay: flex; にします

.fin {
  width: 450px;
  height: 300px;
  background-color: white;
  border: 1px solid black;

  display: flex; ※
  align-items: center;　※
}


.finland4 {
  flex-grow: 1.5; ※
}
.finland2 {
  height: 100%;
  flex-grow: .5;　※
}
.finland3 {
  flex-grow: 8;　※
}

フィンランド国旗完成です！
青いと解りづらいので、青い部分の色を変えてみます。

.finland1 {
  width: 50px;
  height: 50px;
  /* background-color: blue; */ ※
}

.finland4 {
  background-color: pink;　※
  flex-grow: 1.5;
}
.finland2 {
  background-color: blue; ※
  height: 100%;
  flex-grow: .5;
}
.finland3 {
  background-color: yellowgreen;　※
  flex-grow: 8;
}

色を変えてフィンランド国旗になりました。

まとめ

display: flex　を上手に挙動させるためには、
『親要素』と『子要素』をきちんと把握することが大切だと感じてます。
また、『親要素』にはFlexコンテナー。　
『子要素』にはFlexアイテム。

理解することが難しいですが、一個、一個理解していけば必ず完成します。

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