摘要：在中是主流布局方式。它有三種狀態正數零與負數。來看下運行效果。這是為正數的情況，如果，控件的大小就會根據設置的與來固定顯示。如果發現生效的方式請務必告知。在中有主軸與副軸之分，主軸控制的排列方向，默認為。默認值為，繼承父容器的屬性。

今天我們來聊聊Flexbox，它是前端的一個布局方式。在React Native中是主流布局方式。如果你剛剛入門React Native，或者沒有多少前端的技術經驗，亦或者對其半知半解，那么這篇文章將很好的幫助你參透Flexbox的整個全貌。

通過這篇文章你將快速吃透整個Flexbox，因為對于Flexbox你只需掌握以下幾點屬性即可。

flex

flexDirection

justifyContent

alignItems

flexWrap

alignSelf

Flexbox使用的是彈性布局，它有個屬性flex用來控制它的彈性。有點類似與Android布局中的weight屬性。當然與前端的css中的flex也有所不同，它支持的類型是number不是string。它有三種狀態：正數、零與負數。直接看代碼：

import React, {Component} from "react";
import {StyleSheet, Text, View} from "react-native";
 
export default class App extends Component {
  render() {
    return (
      
          
          
          
      
    );
  }
}
   
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來撐滿整個屏幕，orange是固定的一個view，而red與blue使用flex，通過flex的值進行等比(1:2)分攤剩余的空間。來看下運行效果。

這是為正數的情況，如果flex:0，控件的大小就會根據設置的width與height來固定顯示。

如果flex:-1，如果空間足夠，控件的大小也會根據width與height來展示；如果空間不足，會根據minWidth與minHeight來展示。

一般都不會使用flex:-1，而且經過測試，空間不足時minWidth與minHeight并不會生效。如果發現生效的方式請務必告知。

在Flexbox中有主軸與副軸之分，主軸控制child的排列方向，默認為column。可以通過flexDirection屬性改變主軸方向。它有四個可選值分別為

row: child水平方向排列

column: child豎直方向排列(默認)

row-reverse: child水平方向反向排列

column-reverse: child豎直方向反向排列

在上面的demo基礎上改變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來指定主軸方向child的排列方式，它有六個可選值

flex-start: child對齊主軸的起點(默認)

flex-end: child對齊主軸的終點

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可以用來控制副軸上的child排列方式。它有五個可選項分別為

flex-start: child對齊副軸起點(默認)

flex-end: child對齊副軸終點

center: child居中對齊副軸

stretch: child為彈性布局時(未設置副軸方向的大小或者為auto)，拉伸對齊副軸

baseline: 有文本存在時，child在副軸方向基于第一個文本基線對齊

改變container的style，主軸設置為row，依次改變alignItems：flex-start、flex-end、center

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

最后將alignItems設置為stretch，并且改變red的height，red會被拉伸

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

alignItems: baseline，并不是文本的正中心，而是文本View的容器底部。在上面基礎上添加一個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"
  }

如果再增加一個View，由于空間不足它會展示不全。這時可以使用flexWrap屬性，它可以支持自動換行展示。

nowrap: 不換行(默認)

wrap: 自動換行

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

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

alignSelf屬性類似于alignItems，它也是控制副軸上的排列規則，不同的是它使用的對象是child自己。它可以改變父容器alignItems的屬性控制的child排列規則，在副軸上實現自己的排列規則。默認值為auto，繼承父容器的alignItems屬性。因此它也有五個可選值：flex-start、flex-end、center、stretch與baseline。例如我們為range添加alignSelf，其它的child不變，都繼承父容器的alignItems: flex-start

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

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

最后還有三個比較冷門屬性，這里就不詳細一一代碼與貼圖，簡單的說下它們的作用，相同點是它們都是在child中使用，與alignSelf的作用域一樣。

flexBasis: 設置主軸方向上的初始值，默認為auto。如果與width或者height同時存在，則會覆蓋它們的值

flexGrow: 設置chid的放大比例，類似于flex，空間充足時自動按比例放大，默認為0

flexShrink: 設置chid的縮小比例。空間不足時自動按比例縮小，默認為0

有關Flexbox，縱觀全文只需掌握開頭所列的六種屬性，React Native中的絕大多數布局也就不成問題。現在對于Flexbox是否清晰了許多呢？趕緊親自去試試吧~

ViewDragHelper之手勢操作神器

Android Architecture Components Part1:Room

自定義Android注解Part1:注解變量

tensorflow-梯度下降,有這一篇就足夠了

感覺不錯的可以來一波關注，掃描下方二維碼，關注公眾號，及時獲取最新知識技巧。