彈性盒子是CSS3的一種新布局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的屏幕大小以及設備類型時，確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

簡單地說，彈性盒子布局是為了適配所有的設備，當用布局使用之前像素（px）的方式時，在本電腦當然沒問題，但如果換個顯示器，或者換個屏幕大小不一樣的設備，整個頁面布局就壞掉了。使用盒子布局，對每個部分占用的空間提供所占比進行約束，在設置最小壓縮量，這樣，在屏幕延伸或壓縮的同時，每個組成部分也會對應延伸或壓縮，保證了布局的一致性。

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。

注： 彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行。

彈性盒子常用屬性

flex-direction：指定彈性容器中子元素排列方式 如果元素不是彈性盒對象的元素，則 flex-direction 屬性不起作用。 屬性值：

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

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

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

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

flex-wrap：設置彈性盒子的子元素超出父容器時是否換行
flex-wrap 屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。
屬性值：

• nowrap：默認值。規定元素不拆行或不拆列。 不換行。
• wrap：規定元素在必要的時候拆行或拆列。換行，在第一行的上方。
• wrap-reverse：規定元素在必要的時候拆行或拆列，但是以相反的順序。 換行，在第一行的下方。

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

align-items：設置彈性盒子元素在側軸（縱軸）方向上的對齊方式
align-items 屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
屬性值：

• stretch ：默認值。項目被拉伸以適應容器。
• center：項目位于容器的中心。
• flex-start：項目位于容器的開頭。
• flex-end：項目位于容器的結尾。
• baseline：項目位于容器的基線上。

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

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

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

彈性子元素屬性

1.order：設置彈性盒子的子元素排列順序。 用整數值來定義排列順序，數值小的排在前面。可以為負值，默認為0。

2.flex-grow：設置或檢索彈性盒子元素的擴展比率。
一個數字，規定項目將相對于其他靈活的項目進行擴展的量。默認值是 0。

3.flex-shrink：指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大于容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值。
一個數字，規定項目將相對于其他靈活的項目進行收縮的量。默認值是 1。

4.flex-basis：用于設置或檢索彈性盒伸縮基準值。
一個長度單位或者一個百分比，規定元素的初始長度。 auto：默認值。長度等于元素的長度。
如果該項目未指定長度，則長度將根據內容決定。

5.flex：設置彈性盒子的子元素如何分配空間。
flex 屬性用于設置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。
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-items 屬性。
auto：默認值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為
“stretch”。

• stretch：元素被拉伸以適應容器。
• center：元素位于容器的中心。
• flex-start :元素位于容器的開頭。
• flex-end：元素位于容器的結尾。
• baseline：元素位于容器的基線上。
• initial：設置該屬性為它的默認值。
• inherit：從父元素繼承該屬性。

總結

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

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