【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都能實現這個效果。