質問: margin-top: auto;が効かない理由って何でしょうか。 flexboxだと上手くいくのでflexboxにしないとできない理由がよく分かりません。 (調べたらインライン要素にしてるのが良くないとあったのですがインライン要素を使っていないので、、、) 下のhtml/cssはnavタグの要素をheader領域(height:200px)の一番下に持っていくプログラムです。 よろしくお願いします。 html logo nav css body { margin:0; } header { background-color: grey; height: 200px; display: flex; //この2行を消すと flex-direction: column; //margin-top:autoが効きませんでした。 } div{ background-color: red; } nav{ background-color: rgb(136, 136, 221); margin-top: auto; }
回答: flex-direction: column; で上下の並びに切り替えていて Margin-top:autoで下揃えにしてます flex-directionはdisplayがflexじゃないと使えない機能なので それを消すとmargin-topは意味がなくなります あなたのやってることがどういうことか 以下で説明されてるので、もう一度どういうことが出来るのか把握してみましょう