一、Flexbox 佈局

Flex有兩個屬性：Container  和 Item

flex是Flexible Box的縮寫，意為"彈性佈局"，用來為盒狀模型提供最大的靈活性。採用flex佈局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。

容器屬性

簡述：

• flexDirection（決定容器內所有子元素item的排列方向（即主軸方向），如row子元素橫排，column子元素豎排）
• justifyContent（定義了子元素Item在主軸方向上的排列方式，如center就居中，flex-start就是左端為開頭）
• alignItems（子元素沿豎直軸的排列方式，flex-start就靠上，center就放中間線）
• flexWrap（定義是否換行，nowrap就不換行，wrap就換行）

常用：

1、flexDirection ： 用來決定容器內所有子元素Item的排列方向，預設是豎直軸方向，即兩個View豎直排列

（想讓子元素橫向並列就用flexDirection:'row'）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

2、justifyContent：定義了子元素Item在主軸方向上的排列方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

3、alignItems子元素沿豎直軸的排列方式

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

不常用：

1、flexWrap預設容器中的子元素Item都排列在一條軸線上，flexWrap屬性定義瞭如果在一條軸線上排列不下所有的Item元素，可以進行換行排列

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap（預設值）：不換行

wrap：換行，且第一行在上方

wrap-reverse：換行，第一行在下方

元素屬性：

1、flex 佈局權重

1:0：flex=0的專案佔用空間僅為內容所需空間，flex=1的專案會佔據其餘所有空間

 在部分元件指定了height的情況下，flex是“除了height以外剩餘空間”的分佈比例。例如：

<View style={{height:100}}>
    <View style={{flex: 3}} />
    <View style={{flex: 2}} />
</View>

兩個子View的高度分別是 60和40。寬度同理

Flex計算規則詳見：https://blog.csdn.net/u010377383/article/details/79661859

2、alignSelf

專案交叉軸方向自身對齊方式

二、設定border邊線的方法

borderRightWidth: 0,
borderLeftWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 1,
borderBottomColor:'#f5f5f5',

參考：

https://www.jianshu.com/p/4a61a517c792

https://blog.csdn.net/codetomylaw/article/details/52190636