Flexboxを使って国旗を作る
今回はフィンランド国旗
目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
Css Flexboxのチートシート
～codeを書き始める前の準備～
・構成を考える！ 何をどんな風に、どうやって作るのか？
最初にある程度決めておくと後が楽になります。
例 フィンランドの国旗を調べる
<div>は何個必要なのか？
class属性名はどうしようか？
・紙とペンで実際に枠を書いてみる（添付画像 準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略
<div class="finland">
<div class="fin">
<div class="finland1 finland1">しかく４</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アイテム。
理解することが難しいですが、一個、一個理解していけば必ず完成します。
今回は以上です
ありがとうございます！！
↧