CSS 彈性盒子

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

彈性盒子布局是一種在前端HTML開發中比較常用的布局方式，還有一些像網格布局，我比較喜歡用彈性盒子布局。

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

一、介紹

在學習彈性盒子我們必須掌握的：

容器存在兩條軸：橫軸和縱軸

父容器屬性定義為display：flex，表示該元素內部是彈性盒子布局

大體結構分為 一個父容器和很多個子元素的布局。
如下圖：

二、應用在父容器的常用屬性

屬性方法

flex-direction	屬性決定主軸的方向（即子元素的排列方向）
flex-wrap	設置彈性盒子的子元素超出父容器時是否換行
align-items	設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
align-content	修改 flex-wrap 屬性的行為，類似 align-items, 但不是設置子元素對齊，而是設置行對齊
justify-content	設置彈性盒子元素在主軸（橫軸）方向上的對齊方式

1.flex-direction屬性

屬性決定主軸的方向（即子元素的排列方向）

可選值：

row （默認）：按行排列，起點在左端。

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

column ：元素將垂直顯示

column-reverse：與 column 相同，但是以相反的順序

2. flex-wrap屬性

規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向，多行的時候是否換行，和換行的格式

可選值：

nowrap （默認值）：規定元素不拆行或不拆列。

2. wrap：換行，第一行在上方。

wrap-reverse：換行，第一行在下方。。

3. flex-flow屬性

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

效果就是上面兩個屬性

4. align-items 屬性

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

可選值：

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

5. align-content屬性

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

可選值：

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
• space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線占滿整個交叉軸。

6. justify-content屬性

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

可選值：

• flex-start 默認值。子元素位于容器的開頭。
• flex-end 子元素位于容器的結尾。
• center 子元素位于容器的中心。
• space-between 子元素位于各行之間留有空白的容器內。
• space-around 子元素位于各行之前、之間、之后都留有空白的容器內。

三、應用在子元素上的常用屬性

屬性方法

order	設置彈性盒子的子元素排列順序。
flex-grow	設置或檢索彈性盒子元素的擴展比率。
flex-shrink	指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
flex-basis	用于設置或檢索彈性盒伸縮基準值。
align-self	在彈性子元素上使用。覆蓋容器的 align-items 屬性。

1. order屬性

定義子元素的排列順序。數值越小，可以為負數，排列越靠前，默認為0。

.item {order: <integer>; }

2. flex-grow屬性

定義子元素的放大比例，默認為0，即如果存在剩余空間，也不放大。

.item {flex-grow: <number>; /* default 0 */ }

3. flex-shrink屬性

定義了子元素的縮小比例，默認為1，即如果空間不足，該項目將縮小，負值對該屬性無效。

.item {flex-shrink: <number>; /* default 1 */ }

4. flex-basis屬性

定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。

.item {flex-basis: <length> | auto; /* default auto */ }

<integer>：一個長度單位或者一個百分比，規定元素的初始長度。
auto：默認值。長度等于元素的長度。如果該項目未指定長度，則長度將根據內容決定。

5.flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。

.item {flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值

6. align-self屬性

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

.item {align-self: auto | flex-start | flex-end | center | baseline | stretch; }

以上內容參考大佬阮一峰的·Flex 布局教程

到這里彈性盒子布局的使用介紹的很詳細了。我在寫前端頁面的時候屢試不爽。

總結

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

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