css3彈性盒子布局

CSS3 彈性盒( Flexible Box 或 flexbox)，是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

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

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

1.關于display:flex

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

對于移動端：

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

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

2.關于display:box

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

移動端：

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

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

總的來說，不考慮IE瀏覽器的話，PC端上使用哪個都可以，一般使用display:flex；移動端的安卓的UC只支持display:box，iOS的UCdisplay:box和display:flex兩個都支持。

兼容瀏覽器的寫法

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

在父級設置，子代的垂直對齊方式。

start

對于正常方向的框，每個子元素的上邊緣沿著框的頂邊放置。

對于反方向的框，每個子元素的下邊緣沿著框的底邊放置。

end

對于正常方向的框，每個子元素的下邊緣沿著框的底邊放置。

對于反方向的框，每個子元素的上邊緣沿著框的頂邊放置。

center

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

baseline

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

stretch

拉伸子元素以填充包含塊，與父級設置的高度一致。子代height無效。

-webkit-box-align:center;

box-align:center;

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

在父級設置，子代的水平對齊方式。

start

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

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

end

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

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

center

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

justify

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

-webkit-box-pack:center;

box-pack:center;

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

horizontal

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

vertical

從上向下垂直排列子元素

inline-axis

沿著行內軸來排列子元素(映射為 horizontal)

block-axis

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

inherit

應該從父元素繼承 box-orient 屬性的值。

-webkit-box-orient:vertical;

box-orient:vertical;

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

normal

以默認方向顯示子元素

reverse

以反方向顯示子元素

inherit

應該從子元素繼承 box-direction 屬性的值

5.box-flex:number;

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

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

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

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

常用屬性有

flex-direction

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

flex-wrap

設置彈性盒子的子元素超出父容器時是否換行

flex-flow

flex-direction 和 flex-wrap 的簡寫

align-items

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

align-content

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

justify-content

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

1. flex-direction 屬性

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

row

默認值。元素將水平顯示，正如一個行一樣。

row-reverse

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

column

元素將垂直顯示，正如一個列一樣。

column-reverse

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

2. flex-wrap 屬性

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

nowrap

默認值。規定元素不拆行或不拆列。

wrap

規定元素在必要的時候拆行或拆列。

wrap-reverse

規定元素在必要的時候拆行或拆列，但是以相反的順序。

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。

flex-flow:

4. align-items屬性

align-items 屬性定義flex子項在flex容器的當前行的側軸(縱軸)方向上的對齊方式。

stretch

默認值。項目被拉伸以適應容器。

center

項目位于容器的中心。

flex-start

項目位于容器的開頭。

flex-end

項目位于容器的結尾。

baseline

項目位于容器的基線上。

5. justify-content屬性

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

flex-start

默認值。項目位于容器的開頭。

flex-end

項目位于容器的結尾。

center

項目位于容器的中心。

space-between

項目位于各行之間留有空白的容器內。

space-around

項目位于各行之前、之間、之后都留有空白的容器內。

彈性子元素屬性

order

設置彈性盒子的子元素排列順序。

flex-grow

設置或檢索彈性盒子元素的擴展比率。

flex-shrink

指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。

flex-basis

用于設置或檢索彈性盒伸縮基準值。

flex

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

align-self

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

1. order屬性

order: ;

用整數值來定義排列順序，數值小的排在前面。可以為負值，默認為0。

2. flex-grow屬性

flex-grow: ;

integer:一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。

3. flex-shrink屬性

flex-shrink: ;

integer:一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認值是 1。

4. flex-basis屬性

flex-basis: | auto;

integer:一個長度單位或者一個百分比，規定元素的初始長度。

auto：默認值。長度等于元素的長度。如果該項目未指定長度，則長度將根據內容決定。

5. flex屬性

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

flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性

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

flex-grow

一個數字，規定項目將相對于其他元素進行擴展的量。

flex-shrink

一個數字，規定項目將相對于其他元素進行收縮的量。

flex-basis

項目的長度。合法值：“auto”、“inherit” 或一個后跟 “%”、“px”、“em” 或任何其他長度單位的數字。

auto

與 1 1 auto 相同。

none

與 0 0 auto 相同。

initial

設置該屬性為它的默認值，即為 0 1 auto。

inherit

從父元素繼承該屬性。

6. align-self屬性

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

auto

默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 “stretch”。

stretch

元素被拉伸以適應容器。

center

元素位于容器的中心。

flex-start

元素位于容器的開頭。

flex-end

元素位于容器的結尾。

baseline

元素位于容器的基線上。

initial

設置該屬性為它的默認值。

inherit

從父元素繼承該屬性。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。