css flex彈性盒佈局 實現一個左右寬度固定,中間自動撐開的佈局

這種佈局其實是挺常見的,今天也稍作總結。

上代碼

<!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>

有圖有真相!

喜歡的朋友點個贊哦  謝謝

喜歡的朋友們 點~個~贊~哦 !

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章