css3彈性盒子flex實現三欄布局的實現
發(fā)布時間：2020-11-12 17:16:41 作者：Klingonsss 
我要評論
我要評論這篇文章主要介紹了css3彈性盒子flex實現三欄布局的實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
如題：高度已知，左右欄寬度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三欄布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！
相關文章
- 這篇教程將引導大家如何使用em來創(chuàng)建一個基本的彈性布局，從而學習其如何計算？又是如何使用em對層進行彈性擴展？又是如何擴展文本和圖像等內容？下在我們就一起帶著這些問2021-02-08
這篇文章主要介紹了10分鐘理解CSS3 FlexBox彈性布局的相關資料，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-20
這篇文章主要介紹了CSS3 Flex 彈性布局實例代碼，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-11-01
這篇文章主要介紹了css flex 彈性布局詳解的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-02
這篇文章主要介紹了CSS彈性布局FLEX,媒體查詢及移動端點擊事件的實現,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-24
