css3延☏展性小盒子flex完成三栏合理布局的完成

日期：2020-12-11 类型：科技新闻 

关键词：如何创建网站，免费网站建站，网站建设文章，网站建设7个基本流程，自动建站

如题：高宽比己知，上下栏总宽300px，正中间响应式：

延展性小盒子自身便是并排的，大家设定总宽就可以。

用一个器皿container包囊三栏，设定comtainer器皿的display特性为flex，上下栏设定总宽为300px，正中间栏设定flex:1，这儿的1表明总宽占比，实际标值在于其他小盒子的flex值，因为这儿其他小盒子总宽固定不动，因此正中间栏会全自动添充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三栏合理布局</title>
</head>
<style type="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，正中间响应式-->
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>


</html>

实际效果如图所示：

到此这篇有关css3延展性小盒子flex完成三栏合理布局的完成的文章内容就详细介绍到这了,大量有关css3 flex三栏合理布局內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

上一篇：Canvas获得视頻第一帧◎缩列图的完成 返回下一篇：css运用负m◎argin完成均值合理布局的实例