對前端一竅不通，還望各位神指點(diǎn)一二??
首先聲明，部分資料與圖片來自小碼哥，需要學(xué)習(xí)的朋友，文章最下面有鏈接，還望下載資料。
FlexBox布局，就是決定父盒子和子盒子的關(guān)系的
FlexBox核心思想，在CSS是塊，內(nèi)聯(lián)流的方向，F(xiàn)lex布局是基于flex-flow流（主軸是豎直方向，輔軸就是平直方向，當(dāng)主軸是平直方向，那么輔軸就是豎直方向）
一、FlexBox布局
1.1 FlexBox是什么意思呢？
flexible（形容詞）：能夠伸縮或者很容易變化，以適應(yīng)外界條件的變化
box（名詞）：通用的矩形容器
1.2什么是FlexBox布局?
彈性盒模型（The Flexible Box Module）,又叫Flexbox，意為“彈性布局”，旨在通過彈性的方式來對齊和分布容器中內(nèi)容的空間，使其能適應(yīng)不同屏幕，為盒裝模型提供最大的靈活性。
Flex布局主要思想是：讓容器有能力讓其子項目能夠改變其寬度、高度（甚至是順序），以最佳方式填充可用空間；
React native中的FlexBox是這個規(guī)范的一個子集。
1.3大部分情況下是處理圖中FlexItem在FlexContainer中的位置和尺寸關(guān)系
二、屬性定義
a）
flexDirection：該屬性決定主軸的方向
row: 主軸為水平方向，起點(diǎn)為左端。
row-reverse: 主軸為水平方向，起點(diǎn)在右端
column：主軸為豎直方向，起點(diǎn)在上沿。（默認(rèn)）
column-reverse：主軸為豎直方向，起點(diǎn)在下沿。
flexDirection:’row’ (主軸方向為水平方向，起點(diǎn)為左端 )
當(dāng)View包含View1，和View2的時候，
1，若子控件并未設(shè)備高度，則會與父控件的高度相同
2，若子控件并未設(shè)備寬度，則會按照控件中的內(nèi)容進(jìn)行寬度設(shè)置（例如按照文字的總高度）
b)
marginTop: 上間距，
c)
justifyContent：定義伸縮項目在主軸上的對齊方式
flex-start: 伸縮項目向一行的起始位置靠齊
flex-end: 伸縮項目向一行的結(jié)束位置靠齊
center: 伸縮項目向一行的中間位置靠齊
space-between: 兩端對齊，項目之間的間隔都相等
space-around: 伸縮項目會平均的分布在行里，兩端保留一半的空間
d)
alignItems:定義伸縮項目在交叉軸（側(cè)軸，垂直于主軸的軸）上的對其方式
flex-start: 交叉軸的起點(diǎn)對齊
flex-end: 交叉軸的終點(diǎn)對齊
center: 交叉軸的中點(diǎn)對其
baseline: 項目中第一文字的基線對其
stretch: 如果項目中未設(shè)置高度或者設(shè)置為auto，將占滿整個容器的高度（默認(rèn)）
e)
flex-wrap:默認(rèn)情況下，項目都排在一條線上。flex-wrap屬性定義，如果一條軸線排不下該如何換行
nowrap: 不換行
wrap: 換行
wrap-reverse:換行，第一行在下方
nowrap(默認(rèn)值)：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。（和wrap相反）
子控件相關(guān)屬性
元素屬性：
a)
flex: 用來決定盒子寬度（寬度= 彈性寬度=flexGrow/sum(flexGrow)））默認(rèn)值（0，“flex-grow”、“flex-shrink”和“flex-basis”三個屬性的縮寫，其中第二個和第三個參數(shù)（flex- ? ?shrink、flex-basis）是可選參數(shù)。
默認(rèn)值為“0 1 auto”。
寬度＝彈性寬度* ( flexGrow / sum(flexGorw) )
b)
alignSelf: 單個項目在垂直于主軸的的軸上的對其方式
flex-start:父控件頂部
flex-end:父控件底部
center:父控件中間
auto:繼承父元素的alignItems屬性
baseline:第一行文字的基線
stretch:按照父控件的相關(guān)尺寸
Text相關(guān)屬性
三，開發(fā)中如何獲取屏幕的寬，高，分辨率
感謝各位的閱讀，如有不當(dāng)之處還望各位多多指教
相關(guān)百度云資料：鏈接: https://pan.baidu.com/s/1o8EWYCi 密碼: u38t
