如题：高度已知，左右栏 宽 度300px，中间自适应：
弹性 盒子 本身就是并排的，我们设置宽度即可。
用一个容器cont ai ner包裹三栏，设置co mta iner容器的dis play 属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充：
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<t IT le>三栏布局</title>
</head>
<style type="text/css">
html*{
m arg in: 0;
padding: 0;
}
.container{
display: flex;
}
.left{
background-color: aqua;
width: 300px;
h ei ght: 100px;
}
. center {
height: 100px;
flex: 1;
background: # f2 96ff;
}
.right{
height: 100px;
background-color: #6ee28d;
width: 300px;
}
</style>
<body>
<!-- 已知高度，写出三栏布局，左右宽度300px，中间自适应-->
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
效果如图：
到此这篇关于css3弹性盒子flex实现三栏布局的实现的 文章 就介绍到这了,更多相关css3 flex三栏布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 css3弹性盒子flex实现三栏布局的实现 全部内容，希望文章能够帮你解决 css3弹性盒子flex实现三栏布局的实现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3弹性盒子flex实现三栏布局的实现的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did201613