幾個(gè)問題

1. 一個(gè)彈性布局可以由哪幾方面決定匀归？
2. flex布局在web端與react-native端表現(xiàn)一樣嗎鳞疲？
3. react-native中的flex:1樣式的含義？

1. 簡介

2009年，W3C提出了一種新的方案——Flex布局均抽，可以簡便、完整其掂、響應(yīng)式地實(shí)現(xiàn)各種頁面布局油挥。目前，它已經(jīng)得到了幾乎所有瀏覽器的支持款熬，成為未來布局的首選方案深寥。

2. 基本概念

1. Flex是Flexible Box的縮寫，意為"彈性布局"贤牛，用來為盒狀模型提供最大的靈活性惋鹅。任何一個(gè)容器都可以指定為Flex布局。設(shè)為Flex布局以后殉簸，子元素的float闰集、clear和vertical-align屬性將失效。
2. 用Flex布局的元素般卑，稱為Flex容器（flex container）武鲁，簡稱"容器"。它的所有子元素自動(dòng)成為容器成員蝠检，稱為Flex項(xiàng)目（flex item）沐鼠，簡稱"項(xiàng)目"。
3. 容器默認(rèn)存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。項(xiàng)目默認(rèn)沿主軸排列饲梭。

Flex布局關(guān)鍵因素: ①主軸與交叉軸方向; ②兩個(gè)方向?qū)R方式; ③兩個(gè)方向伸縮情況;④是否換行乘盖。

3. 容器屬性

3.1 7個(gè)容器屬性

1. 容器屬性表

2. 常用屬性
   flex-direction排拷、justify-content侧漓、align-items

3.2 display: flex屬性

1. 設(shè)置flex布局
   (1) Web端視圖
   
   Web端視圖
   
   (2) RN端視圖
   
   RN端視圖
2. RN端與Web端差異
   (1) Web端
   需要設(shè)置display: flex
   主軸方向默認(rèn)水平向右。
   (2) RN端
   元素的display屬性取值為flex和none监氢，默認(rèn)為flex布蔗。
   主軸方向默認(rèn)豎直向下。

3.3 flex-direction屬性

1. 定義主軸與交叉軸方向
   flex-direction: row | row-reverse | column | column-reverse;
   ①row（默認(rèn)值）主軸方向水平向右浪腐，交叉軸方向豎直向下纵揍。
   ②row-reverse 主軸方向水平向左，交叉軸方向豎直向下议街。
   ③column 主軸方向豎直向下泽谨，交叉軸方向水平向右。
   ④column-reverse 主軸方向豎直向上特漩，交叉軸方向水平向右吧雹。
   2.RN端與Web端差異
   RN端默認(rèn)值為column。

3.4 flex-wrap屬性

1. 定義主軸方向是否換行
   flex-wrap: nowrap | wrap | wrap-reverse;
   ①nowrap（默認(rèn)）不換行涂身。
   ②wrap 換行雄卷，第一行在上方。
   ③wrap-reverse 換行蛤售，第一行在下方丁鹉。
2. RN端與Web端差異
   RN端屬性取值沒有wrap-reverse。

3.5 flex-flow屬性

1. 定義主軸與交叉軸方向悴能、是否換行
   flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式揣钦，默認(rèn)值為row nowrap。
2. RN端與Web端差異
   RN端不支持此屬性漠酿。

3.6 justify-content屬性

1. 定義項(xiàng)目在主軸方向?qū)R方式
   justify-content: flex-start | flex-end | center | space-between | space-around;
   ①flex-start（默認(rèn)值）向主軸起點(diǎn)方向?qū)R
   ②flex-end 向主軸終點(diǎn)方向?qū)R
   ③center 向主軸中點(diǎn)方向?qū)R
   ④space-between 兩端對齊冯凹，間隔相等
   ⑤space-around 兩側(cè)間隔相等，項(xiàng)目間隔是項(xiàng)目與邊框間隔的2倍
2. 此屬性RN端與Web端無差異

3.7 align-items屬性

1. 定義項(xiàng)目在交叉軸方向?qū)R方式及伸縮情況
   align-items: flex-start | flex-end | center | baseline | stretch;
   ①flex-start 向交叉軸起點(diǎn)方向?qū)R
   ②flex-end 向交叉軸終點(diǎn)方向?qū)R
   ③center 向交叉軸中點(diǎn)方向?qū)R
   ④baseline 項(xiàng)目的第一行文字的基線對齊
   ⑤stretch（默認(rèn)值）如果項(xiàng)目未設(shè)置高度或設(shè)為auto炒嘲，將占滿整個(gè)容器的高度
   注釋: stretch為默認(rèn)屬性值谈竿，即項(xiàng)目在交叉軸方向若未設(shè)置尺寸，則占滿容器尺寸摸吠；若已設(shè)置尺寸，則等于設(shè)置尺寸嚎花，既不可被拉伸又不可被壓縮寸痢。
   當(dāng)align-items屬性為其他屬性值時(shí)，無論項(xiàng)目在交叉軸方向是否設(shè)置尺寸紊选，都以自身尺寸為準(zhǔn)啼止，既不可被壓縮道逗，又不可被拉伸。
2. RN端與Web端差異
   RN端baseline屬性值的表現(xiàn)為項(xiàng)目底邊對齊献烦。

3.8 align-content屬性

1. 定義多根軸線在交叉軸方向的寬度及對齊方式
   align-content: flex-start | flex-end | center | space-between | space-around | stretch;
   ①flex-start 與交叉軸的起點(diǎn)對齊滓窍。
   ②flex-end 與交叉軸的終點(diǎn)對齊。
   ③center 與交叉軸的中點(diǎn)對齊巩那。
   ④space-between 與交叉軸兩端對齊吏夯，軸線之間的間隔平均分布
   ⑤space-around 每根軸線兩側(cè)的間隔都相等。所以即横，軸線之間的間隔比軸線與邊框的間隔大一倍
   ⑥stretch（默認(rèn)值）軸線占滿整個(gè)交叉軸噪生。
   注釋: 無論項(xiàng)目軸線有一根或多根時(shí)，align-items屬性都生效东囚。只有當(dāng)項(xiàng)目軸線有多根時(shí)跺嗽，該屬性才生效。
2. RN端與Web端差異
   RN端默認(rèn)屬性值為flex-start页藻。

4.項(xiàng)目屬性

4.1 6個(gè)項(xiàng)目屬性

4.2 order屬性

1. 定義項(xiàng)目在主軸方向的排列順序
   order: <integer>;
   注釋:數(shù)值越小，排列越靠前份帐，默認(rèn)為0璃吧。
2. RN端與Web端差異
   RN端不支持order屬性。

4.3 flex-grow屬性

1. 定義項(xiàng)目在主軸方向的放大比例
   flex-grow: <number>;
   注釋:①默認(rèn)為0, 即如果存在剩余空間弥鹦，也不放大肚逸。②如果所有項(xiàng)目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）彬坏。如果一個(gè)項(xiàng)目的flex-grow屬性為2朦促，其他項(xiàng)目都為1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍栓始。即: 放大寬度 = 彈性寬度 * (flex-grow/sum(flex-grow))
   注意: 剩余空間的分配比例只與flex-grow的屬性值有關(guān)务冕，與各個(gè)項(xiàng)目的初始尺寸無關(guān)。
2. 此屬性RN端與Web端無差異

4.4 flex-shrink屬性

1. 定義項(xiàng)目在主軸方向的縮小比例
   flex-shrink: <number>;
   注釋: ①默認(rèn)為1幻赚，即如果空間不足禀忆，該項(xiàng)目將縮小。②如果所有項(xiàng)目的flex-shrink屬性都為1落恼，當(dāng)空間不足時(shí)箩退，都將等比例縮小。如果一個(gè)項(xiàng)目的flex-shrink屬性為0佳谦，其他項(xiàng)目都為1戴涝，則空間不足時(shí)，前者不縮小。
   2.RN端與Web端差異
   RN端默認(rèn)屬性值為0，當(dāng)空間不足時(shí)，項(xiàng)目不縮小壁榕。
   總結(jié):Web端默認(rèn)不放大但縮小棚点，RN端默認(rèn)不放大且不縮小。

4.5 flex-basis屬性

1. 定義在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間
   flex-basis: <length> | auto;
   注釋:①瀏覽器在該屬性值的基礎(chǔ)上進(jìn)行縮放。②默認(rèn)值為auto，即項(xiàng)目的本來大小蓄拣。③可以設(shè)置為與width或height屬性一樣的值。
2. 此屬性RN端與Web端無差異

4.6 flex屬性

1. flex屬性是flex-grow, flex-shrink和flex-basis的簡寫申窘，默認(rèn)值為0 1 auto弯蚜。后兩個(gè)屬性可選。
   快捷值：auto (1 1 auto)剃法、none (0 0 auto)碎捺。
   注釋:①auto為常用屬性值，即項(xiàng)目在主軸方向可伸縮贷洲。②外邊距不可伸縮收厨。
   ②可設(shè)置某個(gè)項(xiàng)目的寬度為固定百分比，其余項(xiàng)目平均分配剩余空間优构。
   .item{flex:auto} .item1{flex:0 0 60%}
   ③可設(shè)置某個(gè)項(xiàng)目的寬度為固定像素诵叁，其余項(xiàng)目平均分配剩余空間。
   .item{flex:auto} .item1{flex:0 0 100px}
2. RN端與Web端差異
   (1) flex屬性的表現(xiàn)與Web端不同钦椭，取值只能為數(shù)字拧额。
   (2) flex屬性并不簡單是flex-grow/shrink/basis的簡化
   (3) flex默認(rèn)值為0，表示項(xiàng)目保持原始尺寸彪腔，且總是不可伸縮侥锦。
   (4) 若flex取值為-1，則表示項(xiàng)目保持原始尺寸德挣，但當(dāng)容器尺寸不夠時(shí)恭垦，縮小到minWidth或minHeight。
   (5) 若flex取值為n(n>=1)格嗅，則按照flex值的比例分配剩余空間番挺，剩余空間指的是容器尺寸減去flex值為0或-1項(xiàng)目的尺寸。

4.7 align-self屬性

1. 定義單個(gè)項(xiàng)目在交叉軸方向的對齊方式及伸縮情況
   align-self: auto | flex-start | flex-end | center | baseline | stretch;
   注釋: ①默認(rèn)值為auto屯掖，表示繼承父元素的align-items屬性玄柏，如果沒有父元素，則等同于stretch贴铜。②該屬性可能取6個(gè)值禁荸，除了auto右蒲，其他都與align-items屬性完全一致。
   注意: 子未設(shè)置align-self屬性赶熟，則繼承父的align-items屬性。子設(shè)置align-self屬性陷嘴，可以覆蓋父的align-items屬性映砖。
2. 此屬性RN端與Web端無差異

5. Flex常用屬性匯總(Web端)

web端flex布局常用屬性

6.參考資料

Flex 布局語法篇
Flex布局實(shí)例篇
Flex布局演示
ReactNative/LayoutPropTypes