最近專案中經常這種布局，如下圖所示：
1高度固定，2高度不確定，根據內容變化，3撐滿可視區剩下高度。
這裡我們可以用flex布局。
先給父元素加上：
display: flex;
flex-direction: column;
flex: 1; /* auto也可以 */我是固定高度
我高度不確定
flex-direction: column; 決定元素的排列方向。從上到下排列
flex: 1; 接下來我們看看flex屬性：
這裡flex是乙個復合屬性，是 flex-grow、flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。
.itemflex-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都能實現這個效果。
css flex布局實用
張歆琳 關注2016.06.17 10 50 字數 701 閱讀 1063 喜歡 15 首先弄出原始的html結構，左右側邊欄定寬220px id footer footerdiv 現在將內容容器 page 設成flex彈性盒模型 page 中間main就是個普通的div，因此寬度好像沒有自適應，很...
css flex布局基礎
1 flex 讓所有彈性盒模型物件的子元素都有相同的長度，且忽略它們內部的內容 塊級元素 藍色 紅色藍色 紅色藍色 紅色藍色 紅色 main main div 效果 2 flex basis 專案的長度。合法值 auto inherit 或乙個後跟 px em 或任何其他長度單位的數字 main1 ...
CSS Flex布局整理
注意相容問題 示例的dom結構 div class box div class item 1 div div class item 2 div div class item 3 div div 基礎樣式設計 box item1 flex direction 用於指定flex主軸的方向，繼而決定 fl...