1月21日 flexを使ったレイアウト
flexboxとは
親タグの中の子タグを縦、横に並べてくれるCSSです。
親タグに設定すると「flexコンテナ」となり、中身は「flexアイテム」という形になります。
コンテナ内でアイテムを横に並べたり縦に並べたり…。違う設定では、ウィンド幅に合わせてアイテムを改行してくれたりしてくれるみたいです。
この機能は作ったサイトを「スマホ」で見て貰う時に大いに機能してくれます。
「スマホ」は横ピクセルが狭いので、自動で改行してくれるこの機能が現在の主流になってます。
そのほか色々な機能はありますが、全部書いてると長々となるので、とりあえずは主流な使い方を確実に!と思っています。
練習問題
今日の授業で習った「flexを使ったレイアウト」の宿題を出して頂いたのですが、【セレクタ指定】flex設定している筈なのに、動かない!
心の中で「なんやこれ!?」と突っ込みながら、色々試してみたけど、どうにもならない。
ここで、AIの登場です(笑)
直して貰うのではなく、自分の知識とイメージを広げる為に!
「どうしてできないの?」という事だけを教えて貰おうと思います。
結果
「stylesheetのスペル違い」でした(笑)
一瞬で動きました!
結論「CSSファイルが読めてない」
「どうしても動かない時、まず基本を疑う。」
本日得た最大の教訓でした(笑)

コメント