CSS 彈性盒子模型已經(jīng)提出很久了，但是由于兼容相關(guān)的原因嗤攻，一直沒有大規(guī)模采用判帮，隨著技術(shù)的發(fā)展大量的瀏覽器已經(jīng)可以支持 Flex 屬性了，這篇文章將會(huì)簡單講述和CSS 彈性盒子模型的相關(guān)內(nèi)容仇穗。
彈性盒子簡介
個(gè)人認(rèn)為，彈性布局模型就是根據(jù)所處的設(shè)備戚绕，視圖大小纹坐，進(jìn)行自動(dòng)的寬高改變的的一個(gè)具有更強(qiáng)的空間可塑能力的模型。
由于現(xiàn)代智能設(shè)備的種類繁多舞丛，不同的設(shè)備間展示都存在一定的差距耘子，只依靠浮動(dòng)布局已經(jīng)不能特別好的滿足展示所需要的功能效果。
彈性盒子模型的出現(xiàn)便是為了解決這一痛點(diǎn)球切。當(dāng)下由于低端瀏覽器的使用率依然很高谷誓，導(dǎo)致彈性布局無法大量的普及，主流的CSS布局框架依然采用的浮動(dòng)布局吨凑。然而我相信彈性布局終將會(huì)成為未來的主流布局方案捍歪。
彈性容器相關(guān)概念
(圖片來自MDN)
彈性容器(flex container)
包含著彈性項(xiàng)目的父元素户辱。通過設(shè)置 display 屬性的值為 flex 或 inline-flex 來定義彈性容器。
彈性項(xiàng)目(flex item)
彈性容器的每個(gè)子元素都稱為彈性項(xiàng)目糙臼。彈性容器直接包含的文本將被包覆成匿名彈性單元庐镐。
**軸(axis)
每個(gè)彈性框布局包含兩個(gè)軸。彈性項(xiàng)目沿其依次排列的那根軸稱為主軸(main axis)变逃。垂直于主軸的那根軸稱為側(cè)軸(cross axis)必逆。
彈性盒子使用方法
彈性盒子模型主要有兩個(gè)東西 彈性容器（flex-container） 和 彈性項(xiàng)目（flex-item）±柯遥看名字都知道是什么意思了名眉。
簡單的實(shí)現(xiàn)
要讓一元素成為一個(gè)彈性容器，我們需要設(shè)置它的 display 為 flex凰棉，這樣才能使這個(gè)元素成為一個(gè)彈性容器损拢，這樣下面的元素才能成為彈性項(xiàng)目。
<style>
.container{
display: flex;
height: 100%;
width: 100%;
}
.item{
flex: 1;
text-align:center;
font-size: 50px;
border:1px solid red;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
這樣就實(shí)現(xiàn)了一個(gè)最簡單的彈性布局撒犀。下面我們來詳細(xì)的看一下和彈性布局有關(guān)的CSS屬性
彈性容器相關(guān)屬性
彈性容器的相關(guān)屬性有：align-content福压、align-items、justify-content绘证、flex-direction隧膏、flex-wrap、flex-flow
這些屬性主要是用于規(guī)定彈性項(xiàng)目的排序展示方式嚷那。
align-content
align-content 屬性定義了當(dāng)作為一個(gè)彈性盒子容器的屬性時(shí)胞枕，瀏覽器如何在容器的側(cè)軸圍繞彈性盒子項(xiàng)目分配剩余空間。
| 屬性值 | 描述 |
|---|---|
| flex-start | 所有行緊靠開始點(diǎn) |
| flex-end | 所有行緊靠結(jié)束點(diǎn) |
| center | 所有行居中緊帖 |
| space-between | 行與行之間平均留空 |
| space-around | 行與行之間和行與四周平均留空 |
可以在 DEMO2 試一試改變屬性值的效果
在MDN中還描述了一些別的屬性但是大部分都是沒有支持的魏宽。
align-items
align-items 屬性就比較容易理解了腐泻，它控制的元素在側(cè)軸上的對齊方式。
| 屬性值 | 描述 |
|---|---|
| flex-start | 元素向側(cè)軸起點(diǎn)對齊 |
| flex-end | 元素向側(cè)軸終點(diǎn)對齊 |
| center | 元素在側(cè)軸居中队询。如果元素在側(cè)軸上的高度高于其容器派桩，那么在兩個(gè)方向上溢出距離相同。 |
可以在 DEMO3 試一試改變屬性值的效果
justify-content
justify-content 屬性與 align-items 屬性對應(yīng)蚌斩。它控制的元素在主軸上的對齊方式铆惑。
| 屬性值 | 描述 |
|---|---|
| flex-start | 所有行緊靠開始點(diǎn) |
| flex-end | 所有行緊靠結(jié)束點(diǎn) |
| center | 所有行居中緊帖 |
| space-between | 行與行之間平均留空 |
| space-around | 行與行之間和行與四周平均留空 |
可以在 DEMO4 試一試改變屬性值的效果
flex-direction
flex-direction 屬性是控制彈性盒子容器內(nèi)彈性項(xiàng)目的分布方向（橫向、豎向）送膳。
| 屬性值 | 描述 |
|---|---|
| row | 橫向排列 |
| row-reverse | 橫向反向排列 |
| column | 豎向排列 |
| column-reverse | 豎向反向排列 |
可以在 DEMO5 試一試改變屬性值的效果
flex-wrap
flex-wrap 屬性規(guī)定flex元素是否可以多行顯示员魏。
| 屬性值 | 描述 |
|---|---|
| nowrap | flex 的元素被擺放到到一行，這可能導(dǎo)致溢出 flex 容器 |
| wrap | flex 元素被打斷到多個(gè)行中叠聋。 |
| wrap-reverse | 和 wrap 的行為一樣撕阎，但是打斷后行的排列方向是反的 |
可以在 DEMO5 試一試改變屬性值的效果
flex-flow
flex-wrap 屬性是 flex-direction 和 flex-flow 的簡寫屬性
syntax: <'flex-direction'> || <'flex-wrap'>
以上就是彈性容器的CSS屬性了，主要就是對內(nèi)部彈性項(xiàng)目的排列展示順序的控制碌补。
彈性項(xiàng)目相關(guān)屬性
彈性項(xiàng)目的相關(guān)屬性有：flex-grow虏束、flex-shrink棉饶、flex-basis、flex镇匀。
它們都主要是負(fù)責(zé)控制彈性項(xiàng)目的大小照藻。
flex-grow
flex-grow 這個(gè)屬性控制的彈性項(xiàng)目的拉伸因子，當(dāng)所處行存在空白的時(shí)候會(huì)根據(jù)該行的元素的拉伸因子分配多余的空間坑律。默認(rèn)值為0岩梳，即不會(huì)自動(dòng)擴(kuò)展囊骤。
flex-shrink
flex-shrink 這個(gè)屬性與 flex-grow 相反是收縮因子晃择。默認(rèn)值為1，即會(huì)自動(dòng)收縮也物。
flex-basis
flex-basis 屬性指定了 flex 元素在主軸方向上的初始大小宫屠。如果不設(shè)置一般會(huì)讀取 width;
flex
這個(gè)屬性就是上面三個(gè)屬性的集合體。
order
order 屬性可以更改元素出現(xiàn)的順序滑蚯，即會(huì)優(yōu)先根據(jù)設(shè)置的order來排序浪蹂。默認(rèn)為0;
這些屬性可以在DEMO6中試一試~~
小提示
通過設(shè)置彈性項(xiàng)目的
width和height的min和max可以限制自動(dòng)伸縮的極限哦~~當(dāng)
flex-warp設(shè)置為warp后，如果有基礎(chǔ)寬度那么自動(dòng)收縮將失效告材，當(dāng)達(dá)到基礎(chǔ)寬度會(huì)切換到下一行坤次，除非只剩一個(gè)了。
參考資料
END
2017-7-30 立項(xiàng)
2017-7-28 立項(xiàng)
