現(xiàn)在跨平臺的js+native的框架在手機(jī)應(yīng)用中越來越流行蚯涮，例如facebook的reactnative框架和阿里巴巴的weex框架阿浓。在應(yīng)用這些框架的時(shí)候一個(gè)很重要的問題就是布局問題恳蹲，手機(jī)的屏幕尺寸不定陨簇，iOS和android原生應(yīng)用的布局機(jī)制又不一致叠赐，鑒于此reactnative也啟用css3中加入的新特性flex來解決跨平臺手機(jī)應(yīng)用的布局問題偿洁，而沒有采用傳統(tǒng)的網(wǎng)頁布局方式涯肩。reactnative和網(wǎng)頁中啟用的flex布局所應(yīng)用的知識點(diǎn)完全一致轿钠。所以下面簡單介紹一下flex布局相關(guān)問題巢钓，reactnative相關(guān)知識就不贅述。
一疗垛、基本概念
任何容器都可以指定為flex布局症汹，采用Flex布局的元素稱為Flex容器（flex container），其所有子項(xiàng)目自動成為容器成員贷腕，記Flex 項(xiàng)目（flex item）背镇，簡稱“項(xiàng)目”。
二泽裳、容器屬性
| 屬性名 | 值 | 備注 |
|---|---|---|
| flex-direction | row（默認(rèn)值） | 主軸為水平方向瞒斩，起點(diǎn)在左端。 |
| row-reverse | 主軸為水平方向涮总，起點(diǎn)在右端胸囱。 | |
| column | 主軸為垂直方向，起點(diǎn)在上沿瀑梗。 | |
| column-reverse | 主軸為垂直方向烹笔，起點(diǎn)在下沿。 | |
| flex-wrap | nowrap（默認(rèn)） | 不換行 |
| wrap | 換行抛丽，第一行在上方谤职。 | |
| wrap-reverse | 換行，第一行在下方铺纽。 | |
| flex-flow | <flex-direction> 或者 <flex-wrap> | flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式柬帕，默認(rèn)值為row nowrap |
| justify-content | flex-start（默認(rèn)值） | 左對齊 |
| flex-end | 右對齊 | |
| center | 居中 | |
| space-between | 兩端對齊哟忍，項(xiàng)目之間的間隔都相等狡门。 | |
| space-around | 每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以锅很，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍辰狡。 | |
| align-items | flex-start | 交叉軸的起點(diǎn)對齊炊邦。 |
| flex-end | 交叉軸的終點(diǎn)對齊。 | |
| center | 交叉軸的中點(diǎn)對齊。 | |
| baseline | 項(xiàng)目的第一行文字的基線對齊题造。 | |
| stretch（默認(rèn)值） | 如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度芜赌。 | |
| align-content | flex-start | 交叉軸的終點(diǎn)對齊椎工。 |
| flex-end | 與交叉軸的終點(diǎn)對齊。 | |
| center | 與交叉軸的中點(diǎn)對齊翘簇。 | |
| space-between | 與交叉軸兩端對齊撬码，軸線之間的間隔平均分布潦牛。 | |
| space-around | 每根軸線兩側(cè)的間隔都相等熟吏。所以摇幻，軸線之間的間隔比軸線與邊框的間隔大一倍殖熟。 | |
| stretch（默認(rèn)值） | 軸線占滿整個(gè)交叉軸。 |
容器屬性有六個(gè)叫胁，如上表所示凰慈。其實(shí)準(zhǔn)確的說應(yīng)該是5個(gè)，flex-flow 屬性是flex-direction屬性和flex-wrap屬性的簡寫形式驼鹅。其實(shí)際作用可以結(jié)合下面的示例代碼微谓，用瀏覽器的調(diào)試器更換5個(gè)屬性不同的取值，來看顯示效果输钩，已達(dá)到更好的感性認(rèn)識堰酿，加深對各個(gè)屬性值的作用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
display: flex;
width: 250px;
height: 300px;
flex-direction:row;
align-items: flex-start;
justify-content: space-around;
flex-wrap: wrap;
align-content: stretch;
}
.item{
width:40px;
height:30px;
background: red;
}
</style>
</head>
<body>
<div class="box">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>
值得注意的是由圖表我們可以發(fā)現(xiàn)align-content 和 justify-content 的屬性值取值是相同的张足，其含義也是類似的触创。justify-content 作用于每一行內(nèi)的每一項(xiàng)對齊方式，也就是其水平方向的對齊方式为牍，而align-content 是每一行在垂直方向上的對齊方式（注意：這里說每一行的前提是flex-direction的值設(shè)置的方向是水平方向哼绑，如果flex-direction設(shè)置是垂直方向，那么這里的“每一行”就必須說成是“每一列”了碉咆，justify-content 和 align-content 相對應(yīng)的方向都要相應(yīng)做更改抖韩。）
還有一點(diǎn)要注意的如果項(xiàng)目只有一根軸線，align-content屬性不起作用疫铜，按照上面的程序flex-direction設(shè)置是水平方向茂浮，也就是說必須要是多行的情況下align-content屬性才起作用，也就是item的數(shù)量和尺寸足夠換行壳咕，并且flex-wrap 的屬性不能設(shè)置成nowrap（默認(rèn)值）席揽。
三、項(xiàng)目的屬性
| 屬性名 | 值 | 備注 |
|---|---|---|
| order | <integer> | 定義項(xiàng)目的排列順序谓厘。數(shù)值越小幌羞，排列越靠前，默認(rèn)為0竟稳。 |
| flex-grow | <integer> | 定義項(xiàng)目的放大比例属桦，默認(rèn)為0，即如果存在剩余空間他爸，也不放大聂宾。 |
| flex-shrink | <number> | 定義了項(xiàng)目的縮小比例，默認(rèn)為1诊笤，即如果空間不足系谐，該項(xiàng)目將縮小。 |
| flex-basis | <length> 或 auto | 定義了在分配多余空間之前盏混，項(xiàng)目占據(jù)的主軸空間（main size） （默認(rèn)值為auto） |
| flex | none 或者 [ <'flex-grow'> <'flex-shrink'>? 或者 <'flex-basis'> ] | flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫蔚鸥，默認(rèn)值為0 1 auto惜论。后兩個(gè)屬性可選。 該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)止喷。 |
| align-self | auto（默認(rèn)值） | align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對齊方式馆类，可覆蓋align-items屬性。默認(rèn)值為auto弹谁，表示繼承父元素的align-items屬性乾巧，如果沒有父元素，則等同于stretch预愤。除了auto沟于，其他都與align-items屬性完全一致 |
| flex-start | 交叉軸的起點(diǎn)對齊。 | |
| flex-end | 交叉軸的終點(diǎn)對齊植康。 | |
| center | 交叉軸的中點(diǎn)對齊旷太。 | |
| baseline | 項(xiàng)目的第一行文字的基線對齊。 | |
| stretch（默認(rèn)值） | 如果項(xiàng)目未設(shè)置高度或設(shè)為auto销睁，將占滿整個(gè)容器的高度供璧。 |
這里的示例代碼從略，讀者可以根據(jù)上面的代碼自行更改和調(diào)試冻记，上面屬性主要是定義指定項(xiàng)目的順序睡毒、大小和對齊方式的。
以上內(nèi)容主要參考前端大神阮一峰的教程《Flex 布局教程：語法篇》如果要進(jìn)行更深入的拓展可以參考其另外一篇文章《Flex 布局教程：實(shí)例篇》冗栗。由于其flex布局涉及的屬性和取值比較多演顾，最后附上從網(wǎng)上找的方便記憶的口訣圖片。
附：
