CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)
<!DOCTYPE html>
<html>
<head>
<title>CSS:布局篇_用flex布局实现两边顶宽中间自适应(圣杯布局&双飞翼布局)</title>
<style type="text/css">
*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{
border: 1px solid #333;
background: purple;
color: white;
text-align: center;
height: 50px;
line-height: 50px;
}
.container {
display: flex;
}
.left,.middle,.right{
background-color: aqua;
min-height: 130px;
line-height: 130px;
border: 1px solid #333;
text-align: center;
}
.left{
flex-basis: 220px;
order: 1;
}
.middle {
flex: 1;
order: 2;
}
.right{
flex-basis: 220px;
order: 3;
}
</style>
</head>
<body>
<div class="header">
<h4>header</h4>
</div>
<div class="container">
<div class="middle">
<h4>middle</h4>
</div>
<div class="left">
<h4>left</h4>
</div>
<div class="right">
<h4>right</h4>
</div>
</div>
<div class="footer">
<h4>footer</h4>
</div>
</body>
</html>
使用浮动实现《CSS:布局篇_两边顶宽中间自适应(圣杯布局&双飞翼布局)》见→https://www.cnblogs.com/runrunrun/p/11506650.html