1049750894
1049750894さん
2021/9/24 14:27
22回答
margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。
margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。 [調べたらインライン要素にしてるのが良くないとあったのですがインライン要素を使っていないので、、、] 下のhtml/cssはnavタグの要素をheader領域[height:200px]の一番下に持っていくプログラムです。 よろしくお願いします。 html
物凄く紛らわしい質問の仕方をしてしまっていました。凄く細くて分かりやすい説明とサイトを用意してもらってありがとうございます。本当に申し訳ないですm[_ _]m 上のHTML文の display: flex; flex-direction: column; の2行を消して頂いてflexboxについては触れずに margin-top: auto；がブロック要素に効かない理屈を教えて頂きたいですm[_ _]m 例えでflexboxでは出来たのにって用いたつもりだったのですが、今見返したらflexboxを使うと何故下の方にNAVが行くのかと明らかに書いていて本当に私が馬鹿でした。
HTML、CSS・309閲覧
ベストアンサー
ybb********
ybb********さん
カテゴリマスター
2021/9/24 15:33
1049750894さん >････flexboxにしないとできない理由･･･････ flexbox で制御されないからです。 flexbox はレイアウトには必須ですから、早めによく勉強したら良いでしょう。 ご参考に //creive.me/archives/15427/ //www.flapism.jp/html/278/ body { margin:0; } header { background-color: grey; height: 200px; display: flex; /*この2行を消すと */ flex-direction: column; /* margin-top:autoが効きませんでした。*/ justify-content:space-between; /* margin-top: auto; が無くてもこれを指定すればよい。 */ } div{ background-color: red; } nav{ background-color: rgb[136, 136, 221]; /* margin-top: auto; flexで上のように書けばこれを指定しなくてもよい。 */ } logo nav
ybb********
ybb********さん
2021/9/24 16:52
>････margin-top: auto；がブロック要素に効かない理屈･･･････ 貴方の勘違いです。 そもそも、margin-top: auto；では下に張り付きません。 ご参考に //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ありがとうございます！
お礼日時：2021/9/24 17:32
ベストアンサー
ybb********
ybb********さん
カテゴリマスター
2021/9/24 15:33
1049750894さん >････flexboxにしないとできない理由･･･････ flexbox で制御されないからです。 flexbox はレイアウトには必須ですから、早めによく勉強したら良いでしょう。 ご参考に //creive.me/archives/15427/ //www.flapism.jp/html/278/ body { margin:0; } header { background-color: grey; height: 200px; display: flex; /*この2行を消すと */ flex-direction: column; /* margin-top:autoが効きませんでした。*/ justify-content:space-between; /* margin-top: auto; が無くてもこれを指定すればよい。 */ } div{ background-color: red; } nav{ background-color: rgb[136, 136, 221]; /* margin-top: auto; flexで上のように書けばこれを指定しなくてもよい。 */ } logo nav
ybb********
ybb********さん
2021/9/24 16:52
>････margin-top: auto；がブロック要素に効かない理屈･･･････ 貴方の勘違いです。 そもそも、margin-top: auto；では下に張り付きません。 ご参考に //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ありがとうございます！
お礼日時：2021/9/24 17:32
CSS Grid Layoutについての質問です。 PC表示の際に特定のブロックを非表示にしておき、スマホの時だけ表示させたいのですが、詰めて表示されてしまい上手くいきません。 もし分かる方がいらっしゃれば、ご回答の程どうぞよろしくお願いいたします。 index.html header menu[PC表示の際に非表示にしたい] menu1[PC表示の際に非表示にしたい] key main side1 side2 footer style.css #container { display: grid; grid-template-columns: 1fr 350px; grid-template-rows: 50px 50px 50px 300px 450px 150px; grid-gap: 1px; grid-template-areas: "header header" "menu menu" "menu1 menu1" "key key" "main side" "main side" "footer footer"; } #header { grid-area: header; } #menu { grid-area: menu; } #menu1 { grid-area: menu1; } #key { grid-area: key; } #main { grid-area: main; } #sub { grid-area: side; } #footer { grid-area: footer; } @media screen and [max-width: 750px] { #container { grid-template-columns: 1fr; grid-template-rows: 50px 50px 50px 50px 1fr 1fr 1fr 100px; grid-template-areas: "header" "menu" "menu1" "key" "main" "side" "side" "footer"; } } .item { background:#fee4ab; display: flex; align-items: center; justify-content: center; }
HTML、CSS