切換Flexbox的

Question

我想實現以下Layout與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>

非常感謝您的寶貴時間！

Answer 1

對於此佈局與flexbox一起使用，容器上必須有一個固定的高度。否則，flex項目不知道在哪裏換行，nav元素也不會移動到右列。

在這種情況下，佈局似乎覆蓋了視口，所以你應該全部設置。

只需使用height: 100vh和order屬性。沒有更改HTML。

section { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: 100vh; 
 
} 
 

 
header, footer, main, nav { 
 
    flex: 1; 
 
    margin: 5px; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    border: 1px solid #eebb55; 
 
    background: #ffeebb; 
 
} 
 

 
@media only screen and (orientation: landscape) { 
 
    section { 
 
    flex-wrap: wrap; 
 
    } 
 
    nav { 
 
    flex-basis: 100%; 
 
    order: 1 
 
    } 
 
} 
 

 
body { margin: 0; }

<section> 
 
    <header>header</header> 
 
    <main>content</main> 
 
    <nav>navigation</nav> 
 
    <footer>footer</footer> 
 
</section>

https://jsfiddle.net/aysogmqh/1/

Answer 2

如果你不能設置一個固定的高度上section，你可以做這樣的，你給navigaton的絕對位置。

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) { 
 
    section { 
 
    position: relative; 
 
    } 
 
    header, footer, main { 
 
    width: calc(60% - 10px);   /* 10px is for the margin */ 
 
    box-sizing: border-box; 
 
    } 
 
    nav { 
 
    position: absolute; 
 
    top: 0; 
 
    min-height: calc(100% - 10px); /* 10px is for the margin */ 
 
    right: 0; 
 
    width: calc(40% - 10px);   /* 10px is for the margin */ 
 
    box-sizing: border-box; 
 
    } 
 
}

<section> 
 
    <header>header</header> 
 
    <main>content</main> 
 
    <nav>navigation</nav> 
 
    <footer>footer</footer> 
 
</section>