css3彈性盒子flex實(shí)現(xiàn)三欄布局的實(shí)現(xiàn)

發(fā)布時(shí)間：2020-11-12 17:16:41 作者：Klingonsss

這篇文章主要介紹了css3彈性盒子flex實(shí)現(xiàn)三欄布局的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

如題：高度已知，左右欄寬度300px，中間自適應(yīng)：

彈性盒子本身就是并排的，我們?cè)O(shè)置寬度即可。

用一個(gè)容器container包裹三欄，設(shè)置comtainer容器的display屬性為flex，左右欄設(shè)置寬度為300px，中間欄設(shè)置flex:1，這里的1表示寬度比例，具體數(shù)值取決于其它盒子的flex值，由于這里其它盒子寬度固定，所以中間欄會(huì)自動(dòng)填充：

<!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>
<!-- 已知高度，寫(xiě)出三欄布局，左右寬度300px，中間自適應(yīng)-->
<div class="container">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>
</body>


</html>

效果如圖：

到此這篇關(guān)于css3彈性盒子flex實(shí)現(xiàn)三欄布局的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)css3 flex三欄布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！