本日8時にアラームを鳴らすも、寒さと眠気に勝てず、2度寝。

結局、9時半まで起きられませんでした。

昨日の夜、今日はどこか出かけようと、眠気を無視して、1時半まで調べものするんじゃなかったな。

そのせいで、今日この後、遊びに行けるか時間が厳しいところです。

まぁ片道30分くらいのとこなんで行きますけどね、Camden Market。

それはさておき、本日もマナブさんの【保存版】プログラミング基礎の完全ロードマップ【挫折しない教材】で勉強中。

「8.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はどの状況で使われるのか?

今後、勉強を進めて、自分でサイトを作っていけば分かるようになるんだろうか。

今回は簡単でしたが、このへんで。


%d人のブロガーが「いいね」をつけました。