彈性盒子是 CSS3 的一種新的布局模式。
CSS3 彈性盒（ Flexible Box 或 flexbox）篷角，是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>
引入彈性盒布局模型的目的是提供一種更加有效的方式來(lái)對(duì)一個(gè)容器中的子元素進(jìn)行排列卑吭、對(duì)齊和分配空白空間僚焦。
CSS3 彈性盒子內(nèi)容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成逼侦。
彈性容器通過(guò)設(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 軸和換行的簡(jiǎn)寫
.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)目位于容器的開(kāi)頭。
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)目位于容器的開(kāi)頭咖耘。
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í)際所占寬度，所以說(shuō)這個(gè)屬性 設(shè)置的百分比只是一個(gè)參考值或叫理想值
5.flex設(shè)置彈性盒子的子元素如何分配空間驼鹅。
flex-grow微谓、flex-shrink 和 flex-basis 屬性的簡(jiǎn)寫屬性
flex: flex-grow flex-shrink flex-basis | auto | initial | inherit;
6.align-self在彈性子元素上使用。覆蓋容器的 align-items 屬性输钩。
auto默認(rèn)值豺型。元素繼承了它的父容器的 align-items 屬性。如果沒(méi)有父容器則為 "stretch"买乃。
stretch元素被拉伸以適應(yīng)容器姻氨。
center元素位于容器的中心。
flex-start元素位于容器的開(kāi)頭剪验。
flex-end元素位于容器的結(jié)尾肴焊。
baseline元素位于容器的基線上前联。
initial設(shè)置該屬性為它的默認(rèn)值。
inherit從父元素繼承該屬性抖韩。
