css中flex实现的三列布局
在开发中，我们经常需要使⽤到三列布局，即左右元素宽度固定，中间元素⾃适应。废话不多说，直接上代码：
<div class="box">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.box{
display: flex;
height: 60px;
width: 100%;
background-color: red;
}
.center{
flex: 1;
background-color: yellow;
css布局左边固定右边自适应}
.left,.right{
width: 60px;
background-color: pink;
}
</style>
相⽐较之前使⽤的的浮动（float）和定位（position）代码更加简洁，但是使⽤flex布局需要考虑到浏览器是兼容性。相关内容参考如下：关于flex的W3C规范：
浏览器兼容性可以参考CanIUse：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。