免费观看又色又爽又黄的小说免费_美女福利视频国产片_亚洲欧美精品_美国一级大黄大色毛片

css3彈性盒子flex如何實現三欄布局-創新互聯

這篇文章主要介紹“css3彈性盒子flex如何實現三欄布局”，在日常操作中，相信很多人在css3彈性盒子flex如何實現三欄布局問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3彈性盒子flex如何實現三欄布局”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創新互聯公司是一家以重慶網站建設、網頁設計、品牌設計、軟件運維、seo優化、小程序App開發等移動開發為一體互聯網公司。已累計為餐廳設計等眾行業中小客戶提供優質的互聯網建站和軟件開發服務。

如題：高度已知，左右欄寬度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如何實現三欄布局”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

網站題目：css3彈性盒子flex如何實現三欄布局-創新互聯
本文網址：http://m.newbst.com/article22/dggdjc.html

成都網站建設公司_創新互聯，為您提供品牌網站建設、手機網站建設、響應式網站、網站內鏈、網站排名、云服務器

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

h5響應式網站建設