发布于 2年前
CSS三栏布局——flex
flex布局现在越来越流行,很多框架都采用flex布局。今天我们采用flex来实现三栏布局。
首先父元素设置flex:display。
左右分别设置flex: 0 0 200px。
代码如下所示:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style>
.box{
height: 500px;
background-color: bisque;
position: relative;
display: flex;
}
.box .box-content {
flex: 0 1 auto;
margin: 0 10px;
background-color: blue;
width: 100%;
}
.box .box-left {
flex: 0 0 200px;
background-color: green;
}
.box .box-right {
flex: 0 0 200px;
background-color: pink;
}
header,footer {
height: 75px;
background-color: aqua;
}
</style>
</head>
<body>
<header>
</header>
<div class="box">
<div class="box-left">
左边
</div>
<div class="box-content">
内容区
</div>
<div class="box-right">
右边
</div>
</div>
<footer>
</footer>
</body>
</html>
这里需要注意的是:中间的内容区可能会因为内容不足而撑不开容器,因此最好设置width:100%