目錄

一、簡介

二、內容

三、彈性容器的屬性

1、flex-direction

2、flex-wrap

3、flex-flow

4、justify-content

5、align-items

6、align-content

四、彈性子元素的屬性

1、order

2、flex-grow

3、flex-shrink

4、flex-basis

5、flex

6、align-self

---

一、簡介

彈性布局（Flexible Box）用來為盒裝模型提供最大的靈活性，是CSS3的一種新的布局模式，它是一種當頁面需要適應不同的屏幕大小以及設備類型時確保元素擁有恰當的行為的布局方式。

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

二、內容

彈性盒子由彈性容器和彈性子元素組成，采用Flex布局的元素，被稱為Flex容器，它的所有子元素自動成為容器成員，稱為Flex項目。

彈性容器通過設置其display屬性值為flex或者inline-flex將其定義為彈性容器。

彈性容器內包含了一個或多個彈性子元素。

三、彈性容器的屬性

1、flex-direction

• 主要決定主軸的方向，即項目的排列方向
  • row（默認值）：主軸為水平方向，起點在左端
  • row-reverse ：主軸為水平方向，起點在右端
  • column ：主軸為垂直方向，起點在上沿
  • column-reverse ：主軸為垂直方向，起點在下沿

2、flex-wrap

• 定義在一條軸線排不下的情況下如何進行換行
  • nowrap（默認）：不換行
  • wrap：換行，第一行在上方
  • wrap-reverse：換行，第一行在下方

3、flex-flow

• 是flex-direction屬性和flex-wrap屬性的簡寫形式
  • 默認值：row nowrap
  • flex-flow: <flex-direction> || <flex-wrap>;

4、justify-content

• 定義了項目在主軸上的對齊方式
  • flex-start（默認值）：左對齊
  • flex-end：右對齊
  • center：居中
  • space-between：兩端對齊，項目之間的間隔都相等
  • space-around：每個項目兩側的間隔相等。故相鄰項目之間的間隔會比項目與邊框的間隔大一倍

5、align-items

• 定義項目在交叉軸上如何對齊
  • stretch（默認值）：若項目未設置高度或設為auto，將占滿整個容器的高度
  • flex-start：交叉軸的起點對齊
  • flex-end：交叉軸的終點對齊
  • center：交叉軸的中點對齊
  • baseline：項目的第一行文字的基線對齊

6、align-content

• 定義了多根軸線的對齊方式。（如果項目只有一根軸線，該屬性不起作用）
  • stretch（默認值）：軸線占滿整個交叉軸
  • flex-start：與交叉軸的起點對齊
  • flex-end：與交叉軸的終點對齊
  • center：與交叉軸的中點對齊
  • space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布
  • space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍

四、彈性子元素的屬性

1、order

• 定義項目的排列順序。（數值越小，排列越靠前，默認值為0）

2、flex-grow

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

3、flex-shrink

• 定義了項目的縮小比例。（默認值為1）
  • 如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。
  • 如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
  • 該屬性不支持負值

4、flex-basis

• 定義了在分配多余空間之前，項目占據的主軸空間。
  • 默認值為auto，即項目本來的大小。
  • ?flex-basis: <length> | auto;
  • 瀏覽器根據這個屬性，計算主軸是否有多余空間。

5、flex

• 該屬性是flex-grow，flex-shrink，flex-basis的簡寫（默認值為0 1 auto）
  • 該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

6、align-self

• 該屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
  • align-self: auto | flex-start | flex-end | center | baseline | stretch;
  • 該屬性的取值除了auto，其他均與align-items屬性完全一致。

總結

以上是生活随笔為你收集整理的弹性盒子（Flex Box）模型的全部內容，希望文章能夠幫你解決所遇到的問題。

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