CSS3中更靈活的布局方式，css3更靈活布局

CSS3中更靈活的布局方式，css3更靈活布局

 

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 ,歡迎大家傳播與分享.