.grid {display:flex; min-height:100px;flex-direction: column;}
header, footer {background:red;}
.grid-body {display:flex; flex:1;}
.grid-content {flex:1; background:orange;}
.grid-nav, .grid-ads {flex: 0 0 12em;}
.grid-nav {order: -1; background:yellow;}
.grid-ads {background:yellow;}
<body class="grid">
<header>header</header>
<div class="grid-body">
<mainclass="grid-content">main</main>
<nav class="grid-nav">nav</nav>
<asideclass="grid-ads">aside</aside>
</div>
<footer>footer</footer>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
