柚子快報激活碼778899分享：前端【七】CSS之彈性布局

YandexMarket俄語出海棧綜合2025-08-19480

http://yzkb.51969.com/

【七】CSS之彈性布局

【1】什么是彈性布局

隨著技術的發(fā)展，那么在當前市場上，安裝瀏覽器的客戶端越來越多，設備也越來越多，所以CSS提供的布局，不僅應用于PC端，還可以應用于移動端設備

例如：watch、ipad，mobile等，甚至包括機器人界面、智能屏、智能電視機、3D廣告屏幕等等。也因此前端開發(fā)越來越需要一套代碼就可以應用任何一種不同的屏幕下的樣式。彈性布局，也叫Flex布局(Flexible Box)

這種布局方式是把HTML網頁中每一個元素都看成1個能夠進行自由伸縮的盒模型(Flex盒模型，彈性盒模型)。任何一個html元素都可以指定為Flex盒模型。

.box{

display: flex; /* flex盒模型有2種，塊級元素可以設置為flex盒模型，行內元素也可以通過 display: inline-flex; 設置為行級flex盒模型 */

}

注意，當元素設為 Flex 布局元素以后，當前flex盒模型元素的子元素的float、clear和vertical-align屬性將失效，因為flex布局本身也提供了替代的屬性。

【2】基本概念

采用 Flex 布局的元素，稱為 Flex 容器(flex container)，簡稱"容器"。它的所有子元素自動成為容器成員，稱為 Flex 項目(flex item)，簡稱"項目"。

容器默認存在兩根軸：

水平的主軸(main axis，也叫橫軸或X軸)和垂直的交叉軸(cross axis，也叫縱軸或Y軸)。主軸的開始位置(與邊框的交叉點)叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。項目默認沿主軸排列。

單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size。

【3】Flex容器的屬性

提供了6個屬性可以設置在flex容器上。

屬性描述flex-direction決定主軸的方向(即項目的排列方向)flex-wrap默認情況下，項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。flex-flowflex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap。justify-content定義flex項目在主軸(x軸)上的對齊方式。align-items定義flex項目在交叉軸(y軸)上如何對齊。align-content定義多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

(1)flex-direction

flex-direction屬性決定主軸的方向(即項目的排列方向)。

屬性值描述row按行正向排列row-reverse按行翻轉排列column按列正向排列column-reverse按列翻轉排列

Title

(2)flex-wrap屬性

默認情況下，項目都排在一條線(又稱"軸線")上。flex-wrap屬性定義，如果一條軸線排不下，如何換行。

屬性值描述nowrap默認值，不換行，壓縮flex項目的寬度，讓所有保持一行。wrap換行，不壓縮flex項目的寬度，第一行在上方。wrap-reverse換行，不壓縮flex項目的寬度，第一行在下方。

Title

1. 首頁

2. 商品

3. 商品

4. 用戶

1. 首頁

2. 商品

3. 用戶

1. 首頁

2. 商品

3. 用戶

(3)flex-flow

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

.box {

flex-flow: || ;

}

Title

1. 首頁

2. 商品

3. 商品

4. 用戶

1. 首頁

2. 商品

3. 用戶

1. 首頁

2. 商品

3. 用戶

(4)justify-content屬性

justify-content屬性定義了flex項目在主軸(x軸)上的對齊方式。

屬性值描述flex-start在主軸(x軸)上以起點對齊(左對齊)flex-end在主軸(x軸)上以終點對齊(右對齊)center在主軸(x軸)上以中點對齊(居中對齊)space-between在主軸(x軸)上以兩邊對齊(兩邊對齊)，平均分割元素之間的空隙，不保留最左與最右的空隙space-around在主軸(x軸)上以兩邊對齊(兩邊對齊)，平均分割元素之間的空隙，保留最左與最右的空隙

Title

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

(5)align-items屬性

align-items屬性定義flex項目在交叉軸(y軸)上如何垂直對齊。

屬性值描述flex-start居上對齊flex-end居下對齊center垂直居中對齊baseline基于文本底線對齊stretch基于flex容器的上下邊拉伸對齊

Title

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

1. 首頁
2. 商品
3. 用戶

1. 頁首頁
首頁頁首頁

2. 商品商品商

3. 用戶

1. 首頁
2. 商品
3. 用戶

(6)align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。

屬性值描述flex-start多行居上排列flex-end多行居下排列center多行居中排列space-between多行平均行間空隙排列，不保留首行上方與末行下方空隙space-around多行平均行間空隙排列，保留首行上方與末行下方空隙stretch

Title

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

1. 首頁

2. 搜索

3. 活動

3. 活動

3. 活動

4. 訂單

5. 用戶

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

【4】Flex項目的屬性

以下6個屬性設置在項目上。

屬性描述order定義flex項目的排列順序。數值越小，排列越靠前，默認為0。flex-grow定義flex項目的放大比例，默認為0，即如果存在剩余空間，也不放大。flex-shrink定義flex項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。flex-basis定義在分配多余空間之前，flex項目占據的主軸空間(main size)。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即flex項目的本來大小。flexflex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。align-selfalign-self屬性允許單個flex項目有與其他flex項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。

(1)order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。

Title

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

(2)flex-grow屬性

flex-grow屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間(如果有的話)。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。

Title

1. 首頁

2. 搜索

3. 活動

(3)flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

負值對該屬性無效。如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。

Title

1. 首頁

2. 搜索

3. 活動

3. 活動

3. 活動

3. 活動

(4)flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間(main size)。

瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。它可以設為跟width或height屬性一樣的值(比如350px)，則項目將占據固定空間。

Title

1. 首頁

2. 搜索

3. 活動

4. 訂單

5. 用戶

(5)flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。建議優(yōu)先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值。

Title