css3弹性盒子flex如何实现三栏布局

tangjin

作者

这篇文章主要介绍“css3弹性盒子flex如何实现三栏布局”，在日常操作中，相信很多人在css3弹性盒子flex如何实现三栏布局问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”css3弹性盒子flex如何实现三栏布局”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

如题：高度已知，左右栏宽度300px，中间自适应：

弹性盒子本身就是并排的，我们设置宽度即可。

用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>三栏布局</title>
</head>
<styletype="text/css">
html*{
margin:0;
padding:0;
}
.container{
display:flex;
}
.left{
background-color:aqua;
width:300px;
height:100px;
}
.center{
height:100px;
flex:1;
background:#f296ff;
}
.right{
height:100px;
background-color:#6ee28d;
width:300px;
}
</style>
<body>
<!--已知高度，写出三栏布局，左右宽度300px，中间自适应-->
<divclass="container">
<divclass="left"></div>
<divclass="center"></div>
<divclass="right"></div>
</div>
</body>


</html>

效果如图：