React Native - FlexBox彈性盒模型

FlexBox布局

1. 什么是FlexBox布局?

??彈性盒模型(The Flexible Box Module),又叫FlexBox,意為"彈性布局",旨在通過彈性的方式來對齊和分布容器中內容的空間,使其能適應不同屏幕,為盒模型提供最大的靈活性.
??Flex布局主要思想是: 讓容器有能力讓其子項目能夠改變其寬度,高度(甚至是順序), 以最佳方式填充可用空間;
??React Native中的FlexBox是這個規范的子集.

2. FlexBox在開發中的應用場景

2.1 FlexBox在布局中能夠解決什么問題?

• 浮動布局
• 各種機型屏幕適配
• 水平和垂直居中
• 自動分配寬度
• ... ...

2.2 在CSS中,常規的布局是基于塊和內聯流方向,而Flex布局是基于flex-flow流,稀土很好解釋了Flex布局的思想:

??容器默認存在兩根軸: 水平的主軸(main axis) 和 垂直的主軸(cross axis).主軸的開始位置(與邊框的交叉點)叫做main start,結束位置叫做main end; 交叉軸的開始位置叫做cross start, 結束位置叫做cross end.
??項目默認沿主軸排列,單個項目占據的主軸空間叫做main size,占據的交叉軸空間叫做cross size.

2.3 根據伸縮項目排列方式的不同,主軸和測軸方向也有所變化:

3. FlexBox的常用屬性

3.1 容器屬性

• flexDirection:
  row | row-reverse | column | column-reverse
  • 該屬性決定主軸的方向(即項目的排列方向).
  • row : 主軸為水平方向,起點在左端
  • row-reverse : 主軸為垂直方向,起點在右端.
  • column(默認值) : 主軸為垂直方向,起點在上沿.
  • column-reverse : 主軸為垂直方向,起點在下沿.

• justifyContent: flex-start | flex-end | center | space-between | space-around
  • 定義了伸縮項目在主軸線的對齊方式
  • flex-start(默認值): 伸縮項目向一行的起始位置靠齊.
  • flex-end: 伸縮項目向一行的結束位置靠齊.
  • center: 伸縮項目向一行的中間位置靠齊.
  • space-between: 兩端對齊,項目之間的間隔都相等.
  • space-around: 伸縮項目會平均的分布在行里,兩端保留一半的空間.

• alignItems: flex-start | flex-end | center | baseline | stretch
  • 定義項目在交叉軸上如何對齊, 可以把其想象成側軸(垂直于主軸)的"對齊方式"
  • flex-start: 交叉軸的起點對齊
  • flex-end: 交叉軸的終點對齊
  • center: 交叉軸的重點對齊
  • baseline: 項目的第一行文字的基線對齊
  • stretch(默認值): 如果項目未設置高度或設為auto,將占滿整個容器的高度

• flexWrap: nowrap | wrap | wrap-reverse

  • 默認情況下,項目都排在一條線(又稱"軸線")上. flex-wrap屬性定義,如果一條軸線排不下,如何換行.

  • nowrap(默認值): 不換行

  • wrap: 換行, 第一行在上方.

  • wrap-reverse: 換行,第一行在下方. (和wrap相反)

3.2 元素屬性

• flex
  • "flex-grow", "flex-shrink" 和 "flex-basis"三個屬性的縮寫, 其中第二個和第三個參數("flex-shrink" 和 "flex-basis")是可選參數.
  • 默認值為"0 1 auto".
  • 寬度 = 彈性寬度 * ( flexGrow / sum( flexGorw ) )
    
• alignSelf: "auto | flex-start | flex-end | center | baseline | stretch"
  • align-self屬性允許單個項目有與其他項目不一樣的對齊方式, 可覆蓋align-item屬性. 默認值為auto, 表示繼承父元素的align-items屬性,如果沒有父元素, 則等同于stretch.
    

4. 在React Native中使用Flexbox

4.1 獲取當前屏幕的寬度,高度,分辨率

var Dimensions = require('Dimensions');export default class myApp extends Component {render() {return (<View style={styles.container}><View style={styles.innerView1}></View><View style={styles.innerView2}></View><View style={styles.innerView3}></View><Text>屏幕寬度是{Dimensions.get('window').width}</Text><Text>屏幕高度是{Dimensions.get('window').height}</Text><Text>屏幕分辨率是{Dimensions.get('window').scale}</Text></View>);}
}

感謝作者,原文地址,戳我