演示flex container 容器中的4个属性
flex container
- header
- aside * 2
- main
- footer
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex简化container</title>
<style>
:root {
font-size: 10px;
}
body {
font-size: 16px;
}
body *:not(.container) {
background-color: lightblue;
}
header, footer {
height: 8vh;
}
.container {
height: 84vh
display: flex;
margin: 0.5rem 0;
}
.container aside {
min-width: 20rem;
}
.container main {
margin: 0 0,5rem;
min-width: calc(100% - 40rem- 1rem)
}
</style>
</head>
<body>
<header>页眉</header>
<div class="container">
<aside>左侧</aside>
<main>内容</main>
<aside>右侧</aside>
</div>
<footer>页脚</footer>
</body>
</html>
效果
更多相关文章
- 仿京东页脚和页眉
- Python关于 物理实验数据的代码简化处理
- flex基础：flex项目上的三个属性以及利用flex完成移动商城首页的页
- flex项目上的三个属性及移动商城首页的页眉和页脚的布局
- 仿某商城手机端页眉页脚代码实例
- 移动商城首页的页眉和页脚的布局和flex项目三个属性
- 基于Xilinx Z-7007实现Z-turn SBC简化版——Z-turn Lite
- 传统定位布三行三列和flex布局
- 固定定位：模态框