彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來對(duì)一個(gè)容器中的子元素進(jìn)行排列、對(duì)齊和分配空白空間。
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性子元素。
彈性盒父集屬性：
1.flex-direction 決定軸的方向
row 默認(rèn)值。元素將水平顯示，正如一個(gè)行一樣。
row-reverse 與 row 相同，但是以相反的順序。
column 元素將垂直顯示，正如一個(gè)列一樣。
column-reverse 與 column 相同，但是以相反的順序。
2.flex-wrap 控制換行情況
nowrap 默認(rèn)值。規(guī)定元素不換行。
wrap 規(guī)定元素在必要的時(shí)候換行。
wrap-reverse 規(guī)定元素在必要的時(shí)候以相反的順序換行。
先按正序換行然后將行倒敘。
3.flex-flow 軸和換行的簡寫
.flex-container { flex-flow: <flex-direction> <flex-wrap> }
4.align-content 屬性用于修改 flex-wrap 屬性的行為。類似于 align-items, 但它不是設(shè)置彈性子元素的對(duì)齊，而是設(shè)置各個(gè)行的對(duì)齊。
stretch - 默認(rèn)。各行將會(huì)伸展以占用剩余的空間。
flex-start - 各行向彈性盒容器的起始位置堆疊。
flex-end - 各行向彈性盒容器的結(jié)束位置堆疊。
center -各行向彈性盒容器的中間位置堆疊。
space-between -各行在彈性盒容器中平均分布。
space-around - 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。
5.justify-content 以交叉?zhèn)容S為中心的集聚方式（元素在主軸方向上的對(duì)齊方式）
flex-start默認(rèn)值。項(xiàng)目位于容器的開頭。
flex-end項(xiàng)目位于容器的結(jié)尾。
center項(xiàng)目位于容器的中心。
space-between項(xiàng)目位于各行之間留有空白的容器內(nèi)。
space-around項(xiàng)目位于各行之前、之間、之后都留有空白的容器內(nèi)。
6.align-items 以交叉橫軸為中心的擠聚方式
stretch 。項(xiàng)目被拉伸以適應(yīng)容器。
center 項(xiàng)目位于容器的中心。
flex-start 默認(rèn)值 項(xiàng)目位于容器的開頭。
flex-end 項(xiàng)目位于容器的結(jié)尾。
baseline 項(xiàng)目位于容器的基線上。
flex-item 彈性盒子元素屬性
1.order設(shè)置彈性盒子的子元素排列順序。int 默認(rèn)為0 小的在前
2.flex-grow設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。int
3.flex-shrink指定了 flex 元素的收縮規(guī)則。flex 元素僅在默認(rèn)寬度之和`大于容器 的時(shí)候才會(huì)發(fā)生收縮，其收縮的大小是依據(jù) flex-shrink 的值。int 默認(rèn)值1
4.flex-basis用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值。int 默認(rèn)值auto
如果子盒子不會(huì)因內(nèi)容多寡而發(fā)生伸縮，則和width:20%一個(gè)效果
但會(huì)根據(jù)內(nèi)容的多寡而進(jìn)一步計(jì)算子元素實(shí)際所占寬度，所以說這個(gè)屬性 設(shè)置的百分比只是一個(gè)參考值或叫理想值
5.flex設(shè)置彈性盒子的子元素如何分配空間。
flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
6.align-self在彈性子元素上使用。覆蓋容器的 align-items 屬性。
auto默認(rèn)值。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"。
stretch元素被拉伸以適應(yīng)容器。
center元素位于容器的中心。
flex-start元素位于容器的開頭。
flex-end元素位于容器的結(jié)尾。
baseline元素位于容器的基線上。
initial設(shè)置該屬性為它的默認(rèn)值。
inherit從父元素繼承該屬性
