我想實現以下Layout與Flexbox的:切換Flexbox的
您可以在圖片中看到兩個方向。縱向視圖的左側和橫向視圖的右側。
前提是我想保持我的html儘可能短(如果可能的話)。
有沒有辦法用flex做到這一點?
在縱向視圖中,一切正常,因爲它只是一列。
現在我卡在風景方向。
導航應位於屏幕的右側,其他內容位於左側。
header, footer, main, nav {
margin: 5px;
padding: 5px;
border-radius: 5px;
min-height: 120px;
border: 1px solid #eebb55;
background: #ffeebb;
}
section {
display: flex;
flex-direction: column;
}
@media only screen and (orientation: landscape) {
/* no clue */
}
<section>
<header>header</header>
<main>content</main>
<nav>navigation</nav>
<footer>footer</footer>
</section>
非常感謝您的寶貴時間!
好您的解決方案針對此問題的正常工作。但我現在需要雙方的單獨滾動,我認爲這是不可能的,像這樣的HTML語法。我必須操縱DOM。取出導航欄並將截面和導航高度設置爲100vh並溢出以滾動。 Flex和Grid不適合我的問題。我有點失望。但非常感謝你@Michael_B;) – SuddenlyRust