Flexboxを使って国旗を作る
今回は日本国旗
目標：Flexboxの基礎を理解するため
テキストエディターはVSCode.
↓下記のFlexboxチートシートを参考
Css Flexboxのチートシート
～codeを書き始める前の準備～
・構成を考える！ 何をどんな風に、どうやって作るのか？
最初にある程度決めておくと後が楽になります。
例
<div>は何個必要なのか？
class属性名はどうしようか？
・紙とペンで実際に枠を書いてみる（添付画像 準備出来次第掲載）
ここまで出来たらcodeを書いていきます♪ ※head部分は省略
<div class="japan">
<div class="japa"></div>
</div>
.japan {
width: 500px;
height: 300px;
border: 1px solid black;
margin: 200px auto;
}
.japa {
width: 150px;
height: 150px;
border: solid;
background-color: red;
border-radius: 50%;
}
この状態を一旦ブラウザで確認
display: flex; を親要素につけてみる
.japan {
width: 500px;
height: 300px;
border: 1px solid black;
margin: 200px auto;
display: flex; ※追加
}
ブラウザで確認
display: flex;をつけても変化なし。
次にjustify-content: center; をつけてみる
.japan {
width: 500px;
height: 300px;
/* background-color: pink; */
border: 1px solid black;
margin: 200px auto;
display: flex;
justify-content: center; ※追加
}
赤丸 が水平方向のcenterに来ました
最後に赤丸が中央にくるようalign-items: center; を追加します
.japan {
width: 500px;
height: 300px;
/* background-color: pink; */
border: 1px solid black;
margin: 200px auto;
display: flex;
justify-content: center;
align-items: center; ※追加
}
日本国旗の完成です！
まとめ
display: flex を上手に挙動させるためには、
『親要素』と『子要素』をきちんと把握することが大切だと感じてます。
また、『親要素』にはFlexコンテナー。
Flexコンテナーの水平方向と垂直方向を意識すると苦手意識も和らぐとおもいます
一個、一個理解していけば必ず完成します。
今回は以上です
ありがとうございます！！
↧
