對(duì)前端一竅不通冕杠，還望各位神指點(diǎn)一二??
首先聲明，部分資料與圖片來(lái)自小碼哥酸茴，需要學(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，意為“彈性布局”喳瓣，旨在通過(guò)彈性的方式來(lái)對(duì)齊和分布容器中內(nèi)容的空間馋贤，使其能適應(yīng)不同屏幕，為盒裝模型提供最大的靈活性畏陕。
Flex布局主要思想是：讓容器有能力讓其子項(xiàng)目能夠改變其寬度配乓、高度（甚至是順序），以最佳方式填充可用空間惠毁；
React native中的FlexBox是這個(gè)規(guī)范的一個(gè)子集犹芹。
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’ (主軸方向?yàn)樗椒较蚵恳唬瘘c(diǎn)為左端 )
當(dāng)View包含View1，和View2的時(shí)候灶壶，
1肝断，若子控件并未設(shè)備高度，則會(huì)與父控件的高度相同
2，若子控件并未設(shè)備寬度胸懈，則會(huì)按照控件中的內(nèi)容進(jìn)行寬度設(shè)置（例如按照文字的總高度）
b)
marginTop: 上間距担扑，
c)
justifyContent：定義伸縮項(xiàng)目在主軸上的對(duì)齊方式
flex-start: 伸縮項(xiàng)目向一行的起始位置靠齊
flex-end: 伸縮項(xiàng)目向一行的結(jié)束位置靠齊
center: 伸縮項(xiàng)目向一行的中間位置靠齊
space-between: 兩端對(duì)齊，項(xiàng)目之間的間隔都相等
space-around: 伸縮項(xiàng)目會(huì)平均的分布在行里趣钱，兩端保留一半的空間
d)
alignItems:定義伸縮項(xiàng)目在交叉軸（側(cè)軸涌献，垂直于主軸的軸）上的對(duì)其方式
flex-start: 交叉軸的起點(diǎn)對(duì)齊
flex-end: 交叉軸的終點(diǎn)對(duì)齊
center: 交叉軸的中點(diǎn)對(duì)其
baseline: 項(xiàng)目中第一文字的基線對(duì)其
stretch: 如果項(xiàng)目中未設(shè)置高度或者設(shè)置為auto，將占滿整個(gè)容器的高度（默認(rèn)）
e)
flex-wrap:默認(rèn)情況下羔挡，項(xiàng)目都排在一條線上洁奈。flex-wrap屬性定義，如果一條軸線排不下該如何換行
nowrap: 不換行
wrap: 換行
wrap-reverse:換行绞灼，第一行在下方
nowrap(默認(rèn)值)：不換行利术。
wrap：換行，第一行在上方低矮。
wrap-reverse：換行印叁，第一行在下方。（和wrap相反）
子控件相關(guān)屬性
元素屬性：
a)
flex: 用來(lái)決定盒子寬度（寬度= 彈性寬度=flexGrow/sum(flexGrow)））默認(rèn)值（0军掂，“flex-grow”轮蜕、“flex-shrink”和“flex-basis”三個(gè)屬性的縮寫，其中第二個(gè)和第三個(gè)參數(shù)（flex- ? ?shrink蝗锥、flex-basis）是可選參數(shù)跃洛。
默認(rèn)值為“0 1 auto”。
寬度＝彈性寬度* ( flexGrow / sum(flexGorw) )
b)
alignSelf: 單個(gè)項(xiàng)目在垂直于主軸的的軸上的對(duì)其方式
flex-start:父控件頂部
flex-end:父控件底部
center:父控件中間
auto:繼承父元素的alignItems屬性
baseline:第一行文字的基線
stretch:按照父控件的相關(guān)尺寸
Text相關(guān)屬性
三终议，開(kāi)發(fā)中如何獲取屏幕的寬汇竭，高，分辨率
感謝各位的閱讀，如有不當(dāng)之處還望各位多多指教
相關(guān)百度云資料：鏈接: https://pan.baidu.com/s/1o8EWYCi 密碼: u38t
