css3彈性盒子布局

CSS3 彈性盒( Flexible Box 或 flexbox)，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。

display:flex和display:box都可用于彈性布局，不同的是display:box是2009年的命名，已經(jīng)過(guò)時(shí)，用的時(shí)候需要加上前綴；display:flex是2012年之后的命名。在實(shí)際的測(cè)試中display:flex不能完全的替代display:box。display:flex的瀏覽器兼容性比較麻煩。

1.關(guān)于display:flex

對(duì)于PC端，一般chrome和火狐都能很好地支持。ie不支持，顯示的是順序排列下來(lái)的寬度100%的模塊。

對(duì)于移動(dòng)端：

(1)上述代碼iOS的原生safari瀏覽器是支持的；UC瀏覽器支持的很好；微信瀏覽器不支持

(2)安卓的原生瀏覽器不支持，能夠正常顯示模塊，文檔流依次排列；UC瀏覽器不支持，顯示為空白；微信瀏覽器不支持

2.關(guān)于display:box

PC端：chrome和火狐都能很好地支持。ie不支持，顯示的是順序排列下來(lái)的寬度100%的模塊。

移動(dòng)端：

(1)上述代碼iOS的原生safari瀏覽器是支持的；UC瀏覽器支持的很好

(2)安卓的原生瀏覽器支持；UC瀏覽器不支持，顯示為空白

總的來(lái)說(shuō)，不考慮IE瀏覽器的話，PC端上使用哪個(gè)都可以，一般使用display:flex；移動(dòng)端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex兩個(gè)都支持。

兼容瀏覽器的寫法

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */

display: -moz-box; /* Firefox 17- */

display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */

display: -moz-flex; /* Firefox 18+ */

display: -ms-flexbox; /* IE 10 */

display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */

先介紹一下display：box 的寫法

1.box-align:start/end/center/baseline/stretch

在父級(jí)設(shè)置，子代的垂直對(duì)齊方式。

start

對(duì)于正常方向的框，每個(gè)子元素的上邊緣沿著框的頂邊放置。

對(duì)于反方向的框，每個(gè)子元素的下邊緣沿著框的底邊放置。

end

對(duì)于正常方向的框，每個(gè)子元素的下邊緣沿著框的底邊放置。

對(duì)于反方向的框，每個(gè)子元素的上邊緣沿著框的頂邊放置。

center

均等地分割多余的空間，一半位于子元素之上，另一半位于子元素之下。

baseline

如果 box-orient 是inline-axis或horizontal，所有子元素均與其基線對(duì)齊。

stretch

拉伸子元素以填充包含塊，與父級(jí)設(shè)置的高度一致。子代height無(wú)效。

-webkit-box-align:center;

box-align:center;

2.box-pack:start/end/center/justify

在父級(jí)設(shè)置，子代的水平對(duì)齊方式。

start

對(duì)于正常方向的框，首個(gè)子元素的左邊緣被放在左側(cè)(最后的子元素后是所有剩余的空間)

對(duì)于相反方向的框，最后子元素的右邊緣被放在右側(cè)(首個(gè)子元素前是所有剩余的空間)

end

對(duì)于正常方向的框，最后子元素的右邊緣被放在右側(cè)(首個(gè)子元素前是所有剩余的空間)。

對(duì)于相反方向的框，首個(gè)子元素的左邊緣被放在左側(cè)(最后子元素后是所有剩余的空間)。

center

均等地分割多余空間，其中一半空間被置于首個(gè)子元素前，另一半被置于最后一個(gè)子元素后

justify

在每個(gè)子元素之間分割多余的空間(首個(gè)子元素前和最后一個(gè)子元素后沒(méi)有多余的空間)。

-webkit-box-pack:center;

box-pack:center;

3.box-orient:horizontal|vertical|inline-axis|block-axis|inherit

horizontal

在水平行中從左向右排列子元素

vertical

從上向下垂直排列子元素

inline-axis

沿著行內(nèi)軸來(lái)排列子元素(映射為 horizontal)

block-axis

沿著塊軸來(lái)排列子元素(映射為 vertical)

inherit

應(yīng)該從父元素繼承 box-orient 屬性的值。

-webkit-box-orient:vertical;

box-orient:vertical;

4.box-direction: normal|reverse|inherit;

normal

以默認(rèn)方向顯示子元素

reverse

以反方向顯示子元素

inherit

應(yīng)該從子元素繼承 box-direction 屬性的值

5.box-flex:number;

1)占父級(jí)元素寬度的number份

2)若子元素設(shè)置固定寬度，則該子元素應(yīng)用固定寬度，其他未設(shè)置固定寬度的字元素將余下的父級(jí)寬度(父級(jí)-已設(shè)置固定寬度的子代元素的總寬度按　number占份數(shù)

3)若子元素有margin值，則按余下(父級(jí)寬度-子代固定總寬度-總margin值)寬度占number份

下面介紹一下display 屬性的值為 flex 或 inline-flex的寫法

常用屬性有

flex-direction

指定彈性容器中子元素排列方式

flex-wrap

設(shè)置彈性盒子的子元素超出父容器時(shí)是否換行

flex-flow

flex-direction 和 flex-wrap 的簡(jiǎn)寫

align-items

設(shè)置彈性盒子元素在側(cè)軸(縱軸)方向上的對(duì)齊方式

align-content

修改 flex-wrap 屬性的行為，類似 align-items, 但不是設(shè)置子元素對(duì)齊，而是設(shè)置行對(duì)齊

justify-content

設(shè)置彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式

1. flex-direction 屬性

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

row

默認(rèn)值。元素將水平顯示，正如一個(gè)行一樣。

row-reverse

與 row 相同，但是以相反的順序。

column

元素將垂直顯示，正如一個(gè)列一樣。

column-reverse

與 column 相同，但是以相反的順序。

2. flex-wrap 屬性

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

nowrap

默認(rèn)值。規(guī)定元素不拆行或不拆列。

wrap

規(guī)定元素在必要的時(shí)候拆行或拆列。

wrap-reverse

規(guī)定元素在必要的時(shí)候拆行或拆列，但是以相反的順序。

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡(jiǎn)寫形式，默認(rèn)值為row nowrap。

flex-flow:

4. align-items屬性

align-items 屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對(duì)齊方式。

stretch

默認(rèn)值。項(xiàng)目被拉伸以適應(yīng)容器。

center

項(xiàng)目位于容器的中心。

flex-start

項(xiàng)目位于容器的開頭。

flex-end

項(xiàng)目位于容器的結(jié)尾。

baseline

項(xiàng)目位于容器的基線上。

5. justify-content屬性

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對(duì)齊方式。

flex-start

默認(rèn)值。項(xiàng)目位于容器的開頭。

flex-end

項(xiàng)目位于容器的結(jié)尾。

center

項(xiàng)目位于容器的中心。

space-between

項(xiàng)目位于各行之間留有空白的容器內(nèi)。

space-around

項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。

彈性子元素屬性

order

設(shè)置彈性盒子的子元素排列順序。

flex-grow

設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。

flex-shrink

指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和大于容器的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。

flex-basis

用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。

flex

設(shè)置彈性盒子的子元素如何分配空間。

align-self

在彈性子元素上使用。覆蓋容器的 align-items 屬性。

1. order屬性

order: ;

用整數(shù)值來(lái)定義排列順序，數(shù)值小的排在前面?？梢詾樨?fù)值，默認(rèn)為0。

2. flex-grow屬性

flex-grow: ;

integer:一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行擴(kuò)展的量。默認(rèn)值是 0。

3. flex-shrink屬性

flex-shrink: ;

integer:一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他靈活的項(xiàng)目進(jìn)行收縮的量。默認(rèn)值是 1。

4. flex-basis屬性

flex-basis: | auto;

integer:一個(gè)長(zhǎng)度單位或者一個(gè)百分比，規(guī)定元素的初始長(zhǎng)度。

auto：默認(rèn)值。長(zhǎng)度等于元素的長(zhǎng)度。如果該項(xiàng)目未指定長(zhǎng)度，則長(zhǎng)度將根據(jù)內(nèi)容決定。

5. flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對(duì)象的子元素如何分配空間。

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性

flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;

flex-grow

一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行擴(kuò)展的量。

flex-shrink

一個(gè)數(shù)字，規(guī)定項(xiàng)目將相對(duì)于其他元素進(jìn)行收縮的量。

flex-basis

項(xiàng)目的長(zhǎng)度。合法值：“auto”、“inherit” 或一個(gè)后跟 “%”、“px”、“em” 或任何其他長(zhǎng)度單位的數(shù)字。

auto

與 1 1 auto 相同。

none

與 0 0 auto 相同。

initial

設(shè)置該屬性為它的默認(rèn)值，即為 0 1 auto。

inherit

從父元素繼承該屬性。

6. align-self屬性

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

auto

默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒(méi)有父容器則為 “stretch”。

stretch

元素被拉伸以適應(yīng)容器。

center

元素位于容器的中心。

flex-start

元素位于容器的開頭。

flex-end

元素位于容器的結(jié)尾。

baseline

元素位于容器的基線上。

initial

設(shè)置該屬性為它的默認(rèn)值。

inherit

從父元素繼承該屬性。

總結(jié)

以上是生活随笔為你收集整理的html弹性盒子垂直排列,css3弹性盒子布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。