摘要：在中是主流布局方式。它有三種狀態(tài)正數(shù)零與負(fù)數(shù)。來看下運(yùn)行效果。這是為正數(shù)的情況，如果，控件的大小就會(huì)根據(jù)設(shè)置的與來固定顯示。如果發(fā)現(xiàn)生效的方式請(qǐng)務(wù)必告知。在中有主軸與副軸之分，主軸控制的排列方向，默認(rèn)為。默認(rèn)值為，繼承父容器的屬性。

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

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

flex

flexDirection

justifyContent

alignItems

flexWrap

alignSelf

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 {
  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來撐滿整個(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)過測(cè)試，空間不足時(shí)minWidth與minHeight并不會(huì)生效。如果發(fā)現(xiàn)生效的方式請(qǐng)務(wù)必告知。

在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來指定主軸方向child的排列方式，它有六個(gè)可選值

flex-start: child對(duì)齊主軸的起點(diǎn)(默認(rèn))

flex-end: child對(duì)齊主軸的終點(diǎn)

center: child居中對(duì)齊主軸

space-between: child在主軸方向相鄰child等間距對(duì)齊，首尾child與父容器對(duì)齊

space-around: child在主軸方向相鄰child等間距對(duì)齊，首尾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排列方式。它有五個(gè)可選項(xiàng)分別為

flex-start: child對(duì)齊副軸起點(diǎn)(默認(rèn))

flex-end: child對(duì)齊副軸終點(diǎn)

center: child居中對(duì)齊副軸

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

baseline: 有文本存在時(shí)，child在副軸方向基于第一個(gè)文本基線對(duì)齊

改變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"
  }

如果再增加一個(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屬性類似于alignItems，它也是控制副軸上的排列規(guī)則，不同的是它使用的對(duì)象是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

最后還有三個(gè)比較冷門屬性，這里就不詳細(xì)一一代碼與貼圖，簡(jiǎn)單的說下它們的作用，相同點(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的縮小比例?？臻g不足時(shí)自動(dòng)按比例縮小，默認(rèn)為0

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

ViewDragHelper之手勢(shì)操作神器

Android Architecture Components Part1:Room

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

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

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