我想用flexbox实现下面的布局:Layout,如图所示,左侧为竖屏视图,右侧为横屏视图。
前提是我希望尽可能地保持html的简短(如果可能的话)。
有没有一种使用flex的方法来实现呢?
在竖屏视图中,一切都很正常,因为只有一列。
现在我被卡在了横屏方向上。
导航应该在屏幕的右侧,其他内容应该在左侧。
非常感谢您的时间!
前提是我希望尽可能地保持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>