CSS3中更靈活的布局方式_html/css

flex布局與常規(guī)布局截然不同,常規(guī)布局雖然在頁面上顯示很好,但對于大而復雜的項目,在方向改變,自適應大小,伸展和收縮等方面缺乏靈活性,flex最適合作為應用程序的組件,小規(guī)模布局使用;網(wǎng)格布局適用大規(guī)模布局.

flex整個模塊不只是一個屬性,它涉及很多東西以及一系列屬性.設置為flex標簽的被稱為flex容器,而這個容器內(nèi)的子節(jié)點元素稱為flex項.

如果常規(guī)布局是基于塊和內(nèi)聯(lián)布局的話,flex可以稱為flex流方向布局

我們來看看下面這個圖例,來解釋flex布局的相關思想

我們先來看整個盒子,盒子里有兩個元素1,2;這時候我們還未對其做flex定義,也就沒有其他的術語來定義盒子中的元素.

現(xiàn)在我們把盒子定義為flex,這時候看兩個條紅色方向線條,

main-axis:橫向稱為主軸,

cross axis:縱向相對于主軸來說,稱為交叉軸,

1,2 兩個子盒子: 稱為為flex項.

這里我們繼續(xù)看下,藍色的部分main start,main end,cross start,cross end是布局(主軸,交叉軸)方向的開始,結(jié)束位置.

main start:主軸布局開始位置

main end:主軸布局結(jié)束位置

cross start:交叉軸布局開始位置

cross end :交叉軸布局結(jié)束位置

main size: flex項在主軸布局上的大小

cross size:flex項在交叉軸布局上的大小

下面我們來看下容器和flex項的主要屬性,以及他們的作用.

我們先來了解容器的相關屬性,及作用.下面這個圖,我們定義一個flex容器.

display:flex /*inline-flex*/

定義容器為flex布局,塊狀還是內(nèi)聯(lián)取決于屬性值,flex為塊狀,inline-flex為內(nèi)聯(lián)

建立主軸及方向,定義flex項在容器的布局位置.flex盒子是單方向的布局模式.也就是說flex項要么是布局在水平方向要么就是垂直方向.

flex-direction:row | row-reverse | column | column-reverse;

row :這個是默認值,從左至右的布局
row-reverse:從右至左的布局
column :從上到下
column-reverse:從下到上

從圖來看是一種流的方式,默認是將flex項盡量放置在一行上.當然我們也可以改變和根據(jù)需要來設置屬性.

flex-wrap:nowrap | wrap | wrap-reverse;

nowrap:默認值,單行模式,從左至右
wrap:多行模式(換行)從左至右
wrap-reverse: 多行(換行)模式,從右至左.

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

這個屬性是flex-direction和flex-wrap的合并寫法,屬性默認值為row nowrap

設定flex項沿著主軸對齊.控制flex項之間的多余空間.

justify-content: flex-start | flex-end | center | space-between | space-around;

flext-start:默認值,左對齊
flex-end:右對齊
center:居中
space-between:兩端對齊
space-around:兩邊f(xié)lex項與容器的邊緣距離相等,但每個項之間的距離是邊緣距離的兩倍,每個項之間的距離相等

設定flex項交叉軸上的對齊方式.相對于justify-content的布局方式

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start: 對齊交叉軸的開始位置
flex-end:對齊交叉軸的結(jié)束位置
center:對齊交叉軸上的中間位置
baseline:基線對齊方式
stretch : 默認值,填充整個容器(但仍然依循min-width/max-width)

相對于交叉軸上的對齊方式,類似于主軸上的對齊方式justify-content. 如果容器里只有一條軸上的項,那屬性不起作用.

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start: 基于交叉軸開始位置對齊
flex-end:基于交叉軸結(jié)束位置對齊
center:基于交叉軸中間對齊
space-between: 交叉軸兩端對齊
space-around: 每個項在交叉軸的距離相等
stretch: 默認值,項占滿容器交叉軸

主容器里的屬性,我們了解完后,繼續(xù)看flex項的屬性及作用.

order: ;

默認情況下,flex項按照先后順序布局.order 用來控制flex項在容器中的順序.

該屬性為每項增加了伸張能力,它的值接受一個無單位的數(shù)字值,作為比例.規(guī)定某各項需占用的比例空間. 如果所有項的flex-grow值為1，則它們將平分剩余空間（如果有的話）。如果一個項的flex-grow值為2，其他每項值都為1，值為2的項占據(jù)的剩余空間將比其他項多一倍。

flex-grow:; /* default 0 */

默認值是0,值為0的時候,每項的占用空間不變(原始大小).屬性值,負數(shù)無效.

屬性為每項增加了收縮能力.類似flex-grow,屬性值,負數(shù)無效

flex-shrink:; /* default 1 */

在分配剩余空間之前,定義元素的默認大小.值可以是一個長度,例如30%,5rem,等等,或者一個關鍵詞.值為auto,看起來像"width或者height的值auto"

flex-basis: | auto; /* default auto */

如果設置為0,圍繞內(nèi)容的額外空間不考慮在內(nèi).如果值為auto,額外空間基于flex-grow值來分配.

這個是flex-grow,flex-shrink和flex-basis的合并寫法.這第二個和第三個的參數(shù)是可選值.默認值是: 0 1 auto

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

推薦使用這個合并寫法.

單獨設置flex項在容器里的布局位置.

align-self: auto | flex-start | flex-end | center | baseline | stretch;

提示:float,clear,vertical-align 這些屬性,影響不了flex項的布局方式

本文屬于吳統(tǒng)威的博客,微信公眾號:bianchengderen 的原創(chuàng)文章,轉(zhuǎn)載時請注明出處及相應鏈接:http://www.wutongwei.com/front/infor_showone.tweb?id=145 ,歡迎大家傳播與分享.

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com