2019年-12月-15日
0
伸缩弹性flex布局简单实例
CSS3新增的flex页面布局非常灵活，适应性很强。下面展示一个简单的flex例子：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>heartmv.com</title>
<style>
*{margin:0; padding:0;}
.box{
width:90%;
min-height:500px;
margin:15px auto;
display:flex;
flex-direction:column; /*设置子元素垂直排列*/
}
header{
width:100%;
height:70px;
line-height:70px;
background:#ccc;
text-align:center;
display:flex;
justify-content:space-between;
}
header>h1{
width:250px;
}
header>nav{
width:80%;
height:70px;
font-size:20px;
display:flex;
}
header>nav>a{
flex:1; /*设置所有a元素平分nav父元素的宽度*/
background:#aaa;
border:1px solid #00f;
text-decoration:none;
}
main{
width:100%;
flex:1;
display:flex;
margin:15px 0;
}
main>article{
width:80%;
background:#eee;
flex:4; /*其一级父元素必须包含display:flex;属性*/
}
main>aside{
width:20%;
background:#ddd;
flex:1;
}
footer{
width:100%;
border-radius:10px;
border:1px solid #ccc;
}
footer>p{
font-size:18px;
padding-left:15px;
line-height:40px;
background:rgba(0,0,255,0.2);
}
footer .link{
display:flex;
}
footer .link>a{
flex:1;
line-height:30px;
text-align:center;
}
</style>
</head>
<body>
<div class="box">
<header>
<h1>heartmv.com</h1>
<nav>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
<a href="#">菜单</a>
</nav>
</header>
<main>
<article></article>
<aside></aside>
</main>
<footer>
<p>友情链接</p>
<div class="link">
<a href="#">淘宝</a>
<a href="#">京东</a>
<a href="#">百度</a>
<a href="#">360</a>
<a href="#">游戏</a>
<a href="#">音乐</a>
</div>
</footer>
</div>
</body>
</html>
浏览器效果：
