ササッと便利機能Flexboxを勉強してみた初心者の疑問
本日8時にアラームを鳴らすも、寒さと眠気に勝てず、2度寝。
結局、9時半まで起きられませんでした。
昨日の夜、今日はどこか出かけようと、眠気を無視して、1時半まで調べものするんじゃなかったな。
そのせいで、今日この後、遊びに行けるか時間が厳しいところです。
まぁ片道30分くらいのとこなんで行きますけどね、Camden Market。
それはさておき、本日もマナブさんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】で勉強中。
「８．CSSの神業である「Flexbox」を理解しよう」に取り掛かりました。
プログラムがうまく動かないときは大体タイプミスです。
今日もid名をcontainerにした部分がうまく動かないので、原因をネットで調べたけど、見つからず。
最終的に、HTMLが id=”cotnaier”という意味不明な文字列になっているのが原因でした。
flexboxは簡単に言うと、縦並びを横並びにできて、レイアウト変更しやすい。
通常、縦並び状態だと、スクロールめんどくさいですよね。
ということで、”display: flex;”をコードに追加すると、以下のように横並びになります。
すさまじく読みやすいですね。
今回は練習用なので、数字しか書いてませんが、Home、About、Linkなんて項目が一目瞭然。
さらに便利なことには、”flex-wrap: wrap”をコードに追加すると、画面の大きさに対応して、ブロックが 勝手に改行されます。
この部分は昨日、書いた記事（HTML,CSS学習者がレスポンシブサイトとは何か書いてみる）に似てますね。
そして、”flex-wrap: wrap;”を”flex-wrap: wrap-reverse;”に変更すると……
言わずもがな以下の画像のように数字が逆になるんですが、これどこで使うんだろ？
今回の疑問、reverseはどの状況で使われるのか？
今後、勉強を進めて、自分でサイトを作っていけば分かるようになるんだろうか。
今回は簡単でしたが、このへんで。
