柚子快報邀請碼778899分享：前端 CSS3-flex布局

http://yzkb.51969.com/

文章目錄

一、傳統(tǒng)布局與flex對比1.1 傳統(tǒng)布局1.2 flex布局1.3 建議

二、flex布局原理三、 flex布局常見屬性3.1 以下6個屬性是對父元素設(shè)置的：3.2 flex-direction設(shè)置主軸的方向3.2.1主軸與側(cè)軸3.2.2 屬性值

3.3 justify-content 設(shè)置主軸上子元素的排列方式3.4 flex-wrap設(shè)置子元素是否換行3.5 align-items側(cè)軸上的排列方式（單行）3.6 align-content側(cè)軸上的排列方式（多行）3.7 flex-flow屬性

四、 flex布局子項常見屬性3.1 常見屬性3.2 flex屬性定義子項分配剩余空間，用flex來表示占多少份3.3 align-self 某一個子項在側(cè)軸上的排列方式3.4 order 子項排列順序

一、傳統(tǒng)布局與flex對比

1.1 傳統(tǒng)布局

兼容性好布局繁瑣局限性，不能再移動端很好的布局

1.2 flex布局

操作方便，布局極其簡單，移動端使用比較廣泛pc端瀏覽器支持情況比較差I(lǐng)E11或更低版本不支持flex或僅支持部分

1.3 建議

如果是pc端頁面布局，還是采用傳統(tǒng)方式如果是移動端或者是不考慮兼容的pc則采用flex

二、flex布局原理

flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。當(dāng)我們?yōu)楦负凶釉O(shè)為 flex 布局以后，子元素的 float、clear 和 vertical-align 屬性將失效。lex布局又叫伸縮布局 、彈性布局 、伸縮盒布局 、彈性盒布局采用 Flex 布局的元素，稱為 Flex 容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目（flex item），簡稱"項目"。

三、 flex布局常見屬性

3.1 以下6個屬性是對父元素設(shè)置的：

flex-direction：設(shè)置主軸的方向flex-wrap：是否換行justify-content：主軸上子元素排列方式align-items：側(cè)軸上子元素排列方式（單行）align-content：側(cè)軸上子元素排列方式（多行）flex-flow：flex-direction和flex-wrap的復(fù)合屬性

3.2 flex-direction設(shè)置主軸的方向

3.2.1主軸與側(cè)軸

在 flex 布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸默認(rèn)主軸方向就是 x 軸方向，水平向右默認(rèn)側(cè)軸方向就是 y 軸方向，水平向下 默認(rèn)圖示： 主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的

3.2.2 屬性值

flex-direction屬性決定主軸的方向（即項目的排列方向） 注意：主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的

屬性值說明row默認(rèn)從左到右row-reverse從右到左column從上到下column-reverse從下到上

相關(guān)代碼以及截圖如下： 1）只設(shè)置display:flex,相當(dāng)于設(shè)置了flex-direction:row

2)flex-direction:row-reverse 3)flex-direction:column 4)flex-direction:column-reverse

3.3 justify-content 設(shè)置主軸上子元素的排列方式

注意：在使用這個屬性前，確定主軸是哪個

屬性值說明flex-start默認(rèn)值從頭部開始，如果主軸是X軸，則從左至右flex-end從尾部開始排列center在主軸居中對齊（如果是X軸，則水平居中對齊）space-around平分剩余空間space-between先兩邊貼邊，再平分剩余空間

以下案例只針對主軸為X軸情況 1）justify-content:flex-start 2)justify-content:flex-end 3)justify-content:center 4）justify-content:space-around 5)justify-content:space-between

3.4 flex-wrap設(shè)置子元素是否換行

默認(rèn)情況下，項目都排在一條線（又稱‘軸線’）上，flex-warp屬性定義，flex布局中默認(rèn)是不換行的

屬性值說明nowarp默認(rèn)不換行wrap換行

1）flex-wrap:nowrap 相關(guān)部分代碼如下：

瀏覽器效果圖： 2）flex-wrap:wrap:

3.5 align-items側(cè)軸上的排列方式（單行）

該屬性設(shè)置子項在側(cè)軸上的排列方式，在子項為單項時使用

屬性值說明flex-start默認(rèn)值從上到下flex-end從下到上center垂直居中fstretch拉伸

以下案例默認(rèn)主軸為X軸： 1）align-items:flex-start 2)align-items:flex-end 3)align-items:center 4)align-items:stretch,子元素高度不設(shè)置

3.6 align-content側(cè)軸上的排列方式（多行）

該屬性設(shè)置子項在側(cè)軸上的排列方式，在子項為單項時使用

屬性值說明flex-start默認(rèn)值從頭部開始排列flex-end從尾部開始排列center在側(cè)軸居中對齊space-around平分剩余空間space-between先兩邊貼邊，再平分剩余空間stretch設(shè)置子項元素高度平分父元素高度

以下案例只針對設(shè)置有flex-wrap:wrap情況 1）align-content:flex-start 2)align-content:flex-end; 3)align-content:center 4)align-content:space-around 5)align-content:space-between

6)allign-content:stretch

3.7 flex-flow屬性

flex-flow屬性是flex-direction和flex-wrap屬性的復(fù)合屬性 比如：

flex-grow:row wrap;

四、 flex布局子項常見屬性

3.1 常見屬性

flex屬性align-self屬性order

3.2 flex屬性定義子項分配剩余空間，用flex來表示占多少份

flex是flex-grow,flex-shrink,flex-basic三個屬性的簡寫形式，默認(rèn)值是flex：0 1 auto 1）flex-grow屬性可以按比例分配剩余空間 2）flex-shrink屬性指定了flex元素的收縮規(guī)則 3）flex-basic定義了該元素的空間大小，該屬性默認(rèn)值是auto，若設(shè)置了width，則flex-basic為width，flex-basic具有比width更高的優(yōu)先級

.item{

flex: ; /* defalut:0 */

}

案例：

結(jié)果：粉色2分配剩余空間

3.3 align-self 某一個子項在側(cè)軸上的排列方式

align-self 屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋 align-items 屬性。默認(rèn)值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

div span:nth-child(3){

width: 120px;

align-self: flex-end;

}

結(jié)果：

3.4 order 子項排列順序

數(shù)值越小，排列越靠前，默認(rèn)為0。

柚子快報邀請碼778899分享：前端 CSS3-flex布局

http://yzkb.51969.com/

參考鏈接