css3弹性盒子flex如何实现三栏布局-创新互联

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

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

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

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

    
    


    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;
    }