今天我們來聊聊Flexbox，它是前端的一個(gè)布局方式边翼。在React Native中是主流布局方式鱼响。如果你剛剛?cè)腴TReact Native，或者沒有多少前端的技術(shù)經(jīng)驗(yàn)讯私，亦或者對其半知半解热押，那么這篇文章將很好的幫助你參透Flexbox的整個(gè)全貌西傀。

purpose

通過這篇文章你將快速吃透整個(gè)Flexbox，因?yàn)閷τ贔lexbox你只需掌握以下幾點(diǎn)屬性即可桶癣。

• flex
• flexDirection
• justifyContent
• alignItems
• flexWrap
• alignSelf

flex

Flexbox使用的是彈性布局拥褂，它有個(gè)屬性flex用來控制它的彈性。有點(diǎn)類似與Android布局中的weight屬性牙寞。當(dāng)然與前端的css中的flex也有所不同饺鹃，它支持的類型是number不是string。它有三種狀態(tài)：正數(shù)间雀、零與負(fù)數(shù)悔详。直接看代碼：

import React, {Component} from 'react';
import {StyleSheet, Text, View} from 'react-native';
 
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
          <View style={styles.red}/>
          <View style={styles.blue}/>
          <View style={styles.orange}/>
      </View>
    );
  }
}
   
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  red: {
      flex: 1,
      width: 100,
      backgroundColor: 'red'
  },
  blue: {
      flex: 2,
      width: 100,
      backgroundColor: 'blue'
  },
  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange'
  }
});

父容器使用flex:1來撐滿整個(gè)屏幕，orange是固定的一個(gè)view惹挟，而red與blue使用flex茄螃，通過flex的值進(jìn)行等比(1:2)分?jǐn)偸Ｓ嗟目臻g。來看下運(yùn)行效果连锯。

這是為正數(shù)的情況归苍，如果flex:0，控件的大小就會(huì)根據(jù)設(shè)置的width與height來固定顯示运怖。

如果flex:-1拼弃，如果空間足夠，控件的大小也會(huì)根據(jù)width與height來展示摇展；如果空間不足吻氧，會(huì)根據(jù)minWidth與minHeight來展示。

一般都不會(huì)使用flex:-1咏连，而且經(jīng)過測試盯孙，空間不足時(shí)minWidth與minHeight并不會(huì)生效。如果發(fā)現(xiàn)生效的方式請務(wù)必告知捻勉。

flexDirection

在Flexbox中有主軸與副軸之分镀梭，主軸控制child的排列方向，默認(rèn)為column踱启”ㄕ耍可以通過flexDirection屬性改變主軸方向。它有四個(gè)可選值分別為

• row: child水平方向排列
• column: child豎直方向排列(默認(rèn))
• row-reverse: child水平方向反向排列
• column-reverse: child豎直方向反向排列

在上面的demo基礎(chǔ)上改變style樣式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  red: {
      height: 100,
      width: 100,
      backgroundColor: 'red'
  },
  blue: {
      width: 100,
      height: 100,
      backgroundColor: 'blue'
  },
  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange'
  }
});

分別改變container中flexDirection的值：row埠偿、row-reverse透罢、column、column-reverse

justifyContent

固定好主軸之后冠蒋，可以通過justifyContent來指定主軸方向child的排列方式羽圃，它有六個(gè)可選值

• flex-start: child對齊主軸的起點(diǎn)(默認(rèn))
• flex-end: child對齊主軸的終點(diǎn)
• center: child居中對齊主軸
• space-between: child在主軸方向相鄰child等間距對齊，首尾child與父容器對齊
• space-around: child在主軸方向相鄰child等間距對齊抖剿，首尾child與父容器的間距相等且為相鄰child間距的一半
• space-evenly: child在主軸方向均勻分布朽寞。相鄰間距與首尾間距相等

  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  }

依次改變container中的justifyContent：flex-start识窿、flex-end、center脑融、space-between喻频、space-around與space-evenly

alignItems

主軸固定之后，剩下的就是副軸肘迎，alignItems可以用來控制副軸上的child排列方式甥温。它有五個(gè)可選項(xiàng)分別為

• flex-start: child對齊副軸起點(diǎn)(默認(rèn))
• flex-end: child對齊副軸終點(diǎn)
• center: child居中對齊副軸
• stretch: child為彈性布局時(shí)(未設(shè)置副軸方向的大小或者為auto)，拉伸對齊副軸
• baseline: 有文本存在時(shí)妓布，child在副軸方向基于第一個(gè)文本基線對齊

改變container的style姻蚓，主軸設(shè)置為row，依次改變alignItems：flex-start匣沼、flex-end狰挡、center

  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'flex-start',
    backgroundColor: '#F5FCFF',
  }

最后將alignItems設(shè)置為stretch，并且改變r(jià)ed的height释涛，red會(huì)被拉伸

  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'stretch',
    backgroundColor: '#F5FCFF',
  },
  red: {
      width: 100,
      height: 'auto',
      backgroundColor: 'red'
  }

alignItems: baseline圆兵，并不是文本的正中心，而是文本View的容器底部枢贿。在上面基礎(chǔ)上添加一個(gè)Text，讓文本自身居中展示刀脏。

  container: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'baseline',
    backgroundColor: '#F5FCFF',
  },
  text: {
      width: 80,
      height: 80,
      fontSize: 20,
      color: 'white',
      marginTop: 110,
      backgroundColor: 'black',
      textAlign: 'center',
      textAlignVertical: 'center'
  }

flexWrap

如果再增加一個(gè)View局荚，由于空間不足它會(huì)展示不全。這時(shí)可以使用flexWrap屬性愈污，它可以支持自動(dòng)換行展示耀态。

• nowrap: 不換行(默認(rèn))
• wrap: 自動(dòng)換行

在container中添加flexWrap屬性，并且再添加一個(gè)green view

  container: {
    flex: 1,
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'flex-start',
    backgroundColor: '#F5FCFF',
  },
  green: {
      width: 100,
      height: 100,
      backgroundColor: 'green'
  }

alignSelf

alignSelf屬性類似于alignItems暂雹，它也是控制副軸上的排列規(guī)則首装，不同的是它使用的對象是child自己。它可以改變父容器alignItems的屬性控制的child排列規(guī)則杭跪，在副軸上實(shí)現(xiàn)自己的排列規(guī)則仙逻。默認(rèn)值為auto，繼承父容器的alignItems屬性涧尿。因此它也有五個(gè)可選值：flex-start系奉、flex-end、center姑廉、stretch與baseline缺亮。例如我們?yōu)閞ange添加alignSelf，其它的child不變桥言，都繼承父容器的alignItems: flex-start

  orange: {
      width: 100,
      height: 100,
      backgroundColor: 'orange',
      alignSelf: 'flex-end'
  }

其它的可選值就不一一說明萌踱，可以參考alignItems

other

最后還有三個(gè)比較冷門屬性葵礼，這里就不詳細(xì)一一代碼與貼圖，簡單的說下它們的作用并鸵，相同點(diǎn)是它們都是在child中使用鸳粉，與alignSelf的作用域一樣。

• flexBasis: 設(shè)置主軸方向上的初始值能真，默認(rèn)為auto赁严。如果與width或者h(yuǎn)eight同時(shí)存在，則會(huì)覆蓋它們的值
• flexGrow: 設(shè)置chid的放大比例粉铐，類似于flex疼约，空間充足時(shí)自動(dòng)按比例放大，默認(rèn)為0
• flexShrink: 設(shè)置chid的縮小比例蝙泼〕贪空間不足時(shí)自動(dòng)按比例縮小，默認(rèn)為0

有關(guān)Flexbox汤踏，縱觀全文只需掌握開頭所列的六種屬性织鲸，React Native中的絕大多數(shù)布局也就不成問題。現(xiàn)在對于Flexbox是否清晰了許多呢溪胶？趕緊親自去試試吧~

精選文章

ViewDragHelper之手勢操作神器
自定義Android注解Part1:注解變量
Android Architecture Components Part2:LiveData
ConstraintLayout使用匯總

感覺不錯(cuò)的可以來一波關(guān)注搂擦，掃描下方二維碼，關(guān)注公眾號(hào)哗脖，及時(shí)獲取最新知識(shí)技巧瀑踢。