Flexbox可以在不同屏幕尺寸上提供一致的布局結(jié)構(gòu)。一般來(lái)說(shuō)，使用flexDirection、alignItems和 justifyContent三個(gè)樣式屬性就已經(jīng)能滿足大多數(shù)布局需求。這里有一份簡(jiǎn)易布局圖

Flex-direction
flex-direction屬性決定主軸的方向

Flex-Wap
默認(rèn)情況下（flex-direction: row），項(xiàng)目都排在一軸線上。flex-wrap屬性定義，如果一條軸線排不下，如何換行

justify-content
justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式

align-items
align-items屬性定義項(xiàng)目在交叉軸上如何對(duì)齊,它可取5個(gè)值。具體的對(duì)齊方式與交叉軸的方向有關(guān)

align-content
align-content屬性定義了多根軸線的對(duì)齊方式。如果項(xiàng)目只有一根軸線，該屬性不起作用.

React Native中的Flexbox的工作原理和web上的CSS基本一致，當(dāng)然也存在少許差異。首先是默認(rèn)值不同：flexDirection的默認(rèn)值是column而不是row，alignItems的默認(rèn)值是stretch而不是flex-start，以及flex只能指定一個(gè)數(shù)字值。