css flex弹性盒布局 实现一个左右宽度固定,中间自动撑开的布局

时间:2024-03-15 20:10:05

这种布局其实是挺常见的,今天也稍作总结。

上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="gb2312">
    <title>Title</title>
    <style>
        .box{
          width:800px;
          height:300px;
          background:red;
          display:flex;
          display: -webkit-flex;
          -webkit-flex-direction:row;
        }
        .a,.c{width:100px;background:red;}
        .b {flex:1;background:blue;}
    </style>
</head>
<body>
     <div class="box">
         <div class="a"></div>
         <div class="b"></div>
         <div class="c"></div>
     </div>
</body>
</html>

有图有真相!

css flex弹性盒布局 实现一个左右宽度固定,中间自动撑开的布局
喜欢的朋友点个赞哦  谢谢

喜欢的朋友们 点~个~赞~哦 !