最近專案中經常這種布局,如下圖所示:
1高度固定,2高度不確定,根據內容變化,3撐滿可視區剩下高度。
這裡我們可以用flex布局。
先給父元素加上:
高度撐滿的3元素加上:display: flex;
flex-direction: column;
flex: 1; /* auto也可以 */
完整布局**如下:
接下來我們來理解一下核心**:我是固定高度
我高度不確定
flex-direction: column; 決定元素的排列方向。從上到下排列
flex: 1; 接下來我們看看flex屬性:
這裡flex是乙個復合屬性,是 flex-grow、flex-shrink和flex-basis的簡寫,預設值為0 1 auto。後兩個屬性可選。
.item
該屬性有兩個快捷值: 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都能實現這個效果。
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...