标签：flex color 布局 height 响应 html background order
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹性盒容器-媒体查询-百分比布局--实现响应式布局</title>
<style>
body {
font: 24px Helvetica;
background-color: #fff;
}
/* 弹性盒容器 */
.main {
display: flex;
min-height: 500px;
margin: 0;
padding: 0;
flex-flow: row;
}
.main>* {
margin: 4px;
padding: 5px;
border-radius: 7px;
}
article {
background-color: #719dca;
order: 2;
flex-grow: 3;
}
nav {
background-color: #ffba41;
order: 1;
flex-grow: 1;
/* width: 20%; */
}
aside {
background-color: aquamarine;
order: 3;
flex-grow: 1;
/* width: 20%; */
}
header,
footer {
display: block;
margin: 4px;
padding: 5px;
min-height: 100px;
border: 2px solid #7e7234;
border-radius: 7px;
background-color: rgb(43, 144, 226);
}
footer {
background-color: chocolate;
}
/* 媒体查询-当屏幕宽度小于XX，弹性盒容器内子元素按照纵轴方向排列 */
@media screen and (max-width:640px) {
.main {
flex-flow: column;
}
article,
nav,
aside {
order: 0;
}
nav,
aside,
header,
footer {
min-height: 50px;
max-height: 50px;
}
}
</style>
</head>
<body>
<header>弹性盒容器-媒体查询-百分比布局--实现响应式布局</header>
<!-- 弹性盒容器 -->
<div class="main">
<!-- 弹性盒容器子元素 -->
<article>文章</article>
<nav>导航栏</nav>
<aside>侧边栏</aside>
</div>
<footer>Zhang Jiali-0142 date:2023-12-19</footer>
</body>
</html>
标签：flex,
color,
布局,
height,
响应,
html,
background,
order
From： https://www.cnblogs.com/qcy-blog/p/18126325