CSS Flex和响应式移动端适配：现代主流网站APP小程序的界面布局方式【实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Flex</title>
<style>
body {
margin: 0;
height: 100vh;
background-color: #eee;
}
/* * {
border: 1px solid black;
} */
.flex {
display: flex;
}
.column {
flex-direction: column;
}
.flex1 {
flex: 1;
}
.white {
background-color: white;
}
.mg8 {
margin: 8px;
}
.mgr8 {
margin-right: 8px;
}
.mgt8 {
margin-top: 8px;
}
.yinying {
box-shadow: rgb(0 0 0/ 20%) 0px 2px 1px -1px,
rgb(0 0 0 / 14%) 0px 1px 1px 0px, rgb(0 0 0 / 12%) 0px 1px;
}
</style>
</head>
<body class="flex">
<!-- 侧边栏 -->
<div style="width: 180px; z-index: 2" class="white yinying">
<!-- 头像栏 -->
<div
class="flex"
style="
padding: 10px;
align-items: center;
justify-content: center;
border-bottom: 1px solid #eee;
"
>
<p style="margin-left: 10px; font-size: 12px">hbchen</p>
</div>
</div>
<!-- 主区域 -->
<div class="flex1 flex column">
<!-- 头部栏 -->
<div style="height: 60px; z-index: 1" class="white yinying"></div>
<!-- 内容区 -->
<div style="overflow: auto" class="flex1 flex">
<!-- 左区 -->
<div style="flex: 3" class="flex column mg8">
<!-- 数据区 -->
<div class="flex">
<!-- 数据块 -->
<div style="height: 100px" class="flex1 white mgr8 yinying"></div>
<div style="height: 100px" class="flex1 white mgr8 yinying"></div>
<div style="height: 100px" class="flex1 white mgr8 yinying"></div>
<div style="height: 100px" class="flex1 white mgr8 yinying"></div>
</div>
<!-- 列表区 -->
<div class="flex column">
<!-- 列表项 -->
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
<div style="height: 140px" class="white mgt8 yinying"></div>
</div>
</div>
<!-- 右区 -->
<div style="flex: 1" class="flex column mgr mgt8">
<!-- 提示区 -->
<div style="height: 150px" class="white yinying"></div>
<!-- 消息区 -->
<div style="height: 300px" class="white mgt8 yinying"></div>
</div>
</div>
</div>
</body>
</html>
