flex是一個靈活性強的佈局方式,它能夠很好的控制內部元素的寬度,高度或者剩餘的空間部分,來適應不同的顯示設備和不同的屏幕尺寸,而真正達到一種自適應效果.
flex佈局與常規佈局截然不同,常規佈局雖然在頁面上顯示很好,但對於大而複雜的項目,在方向改變,自適應大小,伸展和收縮等方面缺乏靈活性,flex最適合作爲應用程序的組件,小規模佈局使用;網格佈局適用大規模佈局.
flex整個模塊不只是一個屬性,它涉及很多東西以及一系列屬性.設置爲flex標籤的被稱爲flex容器,而這個容器內的子節點元素稱爲flex項.
如果常規佈局是基於塊和內聯佈局的話,flex可以稱爲flex流方向佈局
我們來看看下面這個圖例,來解釋flex佈局的相關思想
我們先來看整個盒子,盒子裏有兩個元素1,2;這時候我們還未對其做flex定義,也就沒有其他的術語來定義盒子中的元素.
現在我們把盒子定義爲flex,這時候看兩個條紅色方向線條,
main-axis: 橫向稱爲主軸,
cross axis: 縱向相對於主軸來說,稱爲交叉軸,
1,2 兩個子盒子: 稱爲爲flex項.
這裏我們繼續看下,藍色的部分main start,main end,cross start,cross end是佈局(主軸,交叉軸)方向的開始,結束位置.
main start: 主軸佈局開始位置
main end: 主軸佈局結束位置
cross start: 交叉軸佈局開始位置
cross end : 交叉軸佈局結束位置
main size: flex項在主軸佈局上的大小
cross size: flex項在交叉軸佈局上的大小
下面我們來看下容器和flex項的主要屬性,以及他們的作用.
我們先來了解容器的相關屬性,及作用.下面這個圖,我們定義一個flex容器.
display
display:flex /*inline-flex*/
定義容器爲flex佈局,塊狀還是內聯取決於屬性值,flex爲塊狀,inline-flex爲內聯
flex-direction
建立主軸及方向,定義flex項在容器的佈局位置.flex盒子是單方向的佈局模式.也就是說flex項要麼是佈局在水平方向要麼就是垂直方向.
flex-direction:row | row-reverse | column | column-reverse;
row : 這個是默認值,從左至右的佈局
row-reverse: 從右至左的佈局
column : 從上到下
column-reverse: 從下到上
flex-wrap
從圖來看是一種流的方式,默認是將flex項儘量放置在一行上.當然我們也可以改變和根據需要來設置屬性.
flex-wrap:nowrap | wrap | wrap-reverse;
nowrap: 默認值,單行模式,從左至右
wrap: 多行模式(換行)從左至右
wrap-reverse: 多行(換行)模式,從右至左.
flex-flow
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
這個屬性是flex-direction和flex-wrap的合併寫法,屬性默認值爲 row nowrap
justify-content
設定flex項沿着主軸對齊.控制flex項之間的多餘空間.
justify-content: flex-start | flex-end | center | space-between | space-around;
flext-start: 默認值,左對齊
flex-end: 右對齊
center: 居中
space-between: 兩端對齊
space-around: 兩邊flex項與容器的邊緣距離相等,但每個項之間的距離是邊緣距離的兩倍,每個項之間的距離相等
align-items
設定flex項交叉軸上的對齊方式.相對於justify-content的佈局方式
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start: 對齊交叉軸的開始位置
flex-end: 對齊交叉軸的結束位置
center: 對齊交叉軸上的中間位置
baseline: 基線對齊方式
stretch : 默認值,填充整個容器(但仍然依循min-width/max-width)
align-content
相對於交叉軸上的對齊方式,類似於主軸上的對齊方式justify-content. 如果容器裏只有一條軸上的項,那屬性不起作用.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start: 基於交叉軸開始位置對齊
flex-end: 基於交叉軸結束位置對齊
center: 基於交叉軸中間對齊
space-between: 交叉軸兩端對齊
space-around: 每個項在交叉軸的距離相等
stretch: 默認值,項佔滿容器交叉軸
主容器裏的屬性,我們瞭解完後,繼續看flex項的屬性及作用.
order
order: <integer>;
默認情況下,flex項按照先後順序佈局.order 用來控制flex項在容器中的順序.
flex-grow
該屬性爲每項增加了伸張能力,它的值接受一個無單位的數字值,作爲比例.規定某各項需佔用的比例空間. 如果所有項的flex-grow值爲1，則它們將平分剩餘空間（如果有的話）。如果一個項的flex-grow值爲2，其他每項值都爲1，值爲2的項佔據的剩餘空間將比其他項多一倍。
flex-grow:<number>; /* default 0 */
默認值是0,值爲0的時候,每項的佔用空間不變(原始大小).屬性值,負數無效.
flex-shrink
屬性爲每項增加了收縮能力.類似flex-grow,屬性值,負數無效
flex-shrink:; /* default 1 */
flex-basis
在分配剩餘空間之前,定義元素的默認大小.值可以是一個長度,例如30%,5rem,等等,或者一個關鍵詞.值爲auto,看起來像"width或者height的值auto"
flex-basis: <length> | auto; /* default auto */
如果設置爲0,圍繞內容的額外空間不考慮在內.如果值爲auto,額外空間基於flex-grow值來分配.
flex
這個是flex-grow,flex-shrink和flex-basis的合併寫法.這第二個和第三個的參數是可選值.默認值是: 0 1 auto
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
推薦使用這個合併寫法.
align-self
單獨設置flex項在容器裏的佈局位置.
align-self: auto | flex-start | flex-end | center | baseline | stretch;
提示:float,clear,vertical-align 這些屬性,影響不了flex項的佈局方式
本文屬於吳統威的博客,微信公衆號:bianchengderen 的原創文章,轉載時請註明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=145 ,歡迎大家傳播與分享.