1 Star 1 Fork 0

GrapeTech/flexbox-demo

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
flexbox-demo-2.html 1.53 KB
一键复制 编辑 原始数据 按行查看 历史
zglit 提交于 2018-09-24 20:57 . 新建 flexbox-demo-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
*:before, *:after {
box-sizing: inherit;
}
body {
width: 100%;
height: 100%;
overflow-x: hidden;
font-size: 100%;
line-height: 1.5;
}
.example {
width: 100%;
max-width: 1200px;
height: 700px;
margin: 0 auto;
}
header, footer {
width: 100%;
padding: 1em;
text-align: center;
font-size: 2rem;
background-color: coral;
}
.main {
display: flex;
height: 100%;
font-size: 2rem;
}
nav, aside {
padding: 1em;
}
nav {
background-color: lightblue;
}
aside {
background-color: lightgreen;
}
.content {
background-color: orange;
padding: 1em;
order: -1;
}
footer {
align-self: flex-end;
}
</style>
</head>
<body>
<div class="example">
<header>
header content here
</header>
<main class="main">
<nav>
nav content here
</nav>
<div class="content">
main content here
</div>
<aside>
aside content here
</aside>
</main>
<footer>
footer content here
</footer>
</div>
</body>
</html>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/GrapeTech/flexbox-demo.git
git@gitee.com:GrapeTech/flexbox-demo.git
GrapeTech
flexbox-demo
flexbox-demo
master

搜索帮助