我想实现以下Layout https://i.stack.imgur.com/tOpuX.png与弹性盒：
您可以在图片中看到两个方向。左侧为纵向视图，右侧为横向视图。
前提是我想让我的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>
非常感谢您的宝贵时间！
为了使此布局能够与 Flexbox 一起使用，容器上必须有固定的高度。否则，弹性项目不知道在哪里换行，导航元素也不会移动到右列。
在这种情况下，布局似乎覆盖了视口，因此您应该已准备就绪。
只需使用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>
jsfiddle 演示 https://jsfiddle.net/aysogmqh/1/
其他选项请参见：使 div 跨越网格中的两行 https://stackoverflow.com/q/42946454/3597276
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
