【CSS】flex佈局實際運用及理解
阿新 • • 發佈:2018-11-20
最近專案中經常這種佈局,如下圖所示:
1高度固定,2高度不確定,根據內容變化,3撐滿可視區剩下高度。
這裡我們可以用flex佈局。
先給父元素加上:
display: flex;
flex-direction: column;
高度撐滿的3元素加上:
flex: 1; /* auto也可以 */
完整佈局程式碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> </head> <body> <div class="container"> <div class="item1"> 我是固定高度 </div> <div class="item2"> 我高度不確定 </div> <div class="item3"> <ul> <li>aaaaa</li> <li>sdsdad</li> <li>fdsfs</li> <li>dfsf</li> <li>dsss</li> </ul> </div> </div> </body> </html> <style> body{ margin: 0; } .container{ display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .item1{ height: 50px; background: #ffbb33; } .item2{ background: antiquewhite; } .item3{ flex: 1; /* auto也可以 */ background: brown; overflow-y: auto; } </style>
接下來我們來理解一下核心程式碼:
flex-direction: column; 決定元素的排列方向。從上到下排列
flex: 1; 接下來我們看看flex屬性:
flex屬性
這裡flex是一個複合屬性,是 flex-grow、flex-shrink和flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。
.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
該屬性有兩個快捷值: auto(1 1 auto)和none(0 0 auto)
flex-grow 屬性定義屬性定義專案的放大比例,預設為0,即如果存在剩餘空間,也不放大。
flex-shrink 屬性定義了專案的縮小比例,預設為1,即如果空間不足,該元素將縮小。
flex-basis 屬性定義了在分配多餘空間之前,元素佔據的主軸空間。
flex是flex-grow, flex-shrink 和 flex-basis的複合屬性,flex-grow設為1表示該元素等分剩餘空間,因為只有一個子元素設定了這個,該元素就會撐滿剩餘空間,這個是解決高度不夠時撐滿剩下空間。flex-shrink: 1是空間不足時,該元素會縮小,這個解決當該元素內容高度過高時撐滿剩餘空間。flex-basis: 0%是在分配多餘空間之前,該元素佔據的主軸空間。設為0%或者auto都能實現這個效果。所以flex: 1和flex: auto都能實現這個效果。