margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。

補足

物凄く紛らわしい質問の仕方をしてしまっていました。凄く細くて分かりやすい説明とサイトを用意してもらってありがとうございます。本当に申し訳ないですm(_ _)m 上のHTML文の display: flex; flex-direction: column; の2行を消して頂いてflexboxについては触れずに margin-top: auto;がブロック要素に効かない理屈を教えて頂きたいですm(_ _)m 例えでflexboxでは出来たのにって用いたつもりだったのですが、今見返したらflexboxを使うと何故下の方にNAVが行くのかと明らかに書いていて本当に私が馬鹿でした。

HTML、CSS64閲覧

ベストアンサー

0

>・・・・margin-top: auto;がブロック要素に効かない理屈・・・・・・・ 貴方の勘違いです。 そもそも、margin-top: auto;では下に張り付きません。 ご参考に↓ https://www.granfairs.com/blog/staff/centering-by-css flexを使わないなら、例えば、↓ ・・・・・・・ header { position:relative; /* 追加 */ background-color: grey; height: 200px; } div{ background-color: red; } nav{ position:absolute; bottom:0; width:100%; /* 追加 */ background-color: rgb(136, 136, 221); } ・・・・・・・

ThanksImg質問者からのお礼コメント

凄い下手な質問にも関わらず丁寧に教えてくれた御二方ありがとうございますm(_ _)m ベストアンサーは個人的に分かりやすかったので選ばせていただきました。まだまだ初学者なので御二方の説明凄く助かりましたm(_ _)mありがとうございます!

お礼日時:9/24 17:32

その他の回答(1件)

0

flex-direction: column; で上下の並びに切り替えていて Margin-top:autoで下揃えにしてます flex-directionはdisplayがflexじゃないと使えない機能なので それを消すとmargin-topは意味がなくなります あなたのやってることがどういうことか 以下で説明されてるので、もう一度どういうことが出来るのか把握してみましょう https://yuyauver98.me/flex-margin-top-auto/

この返信は削除されました