前言

看過很多關于FlexBox布局的文章管跺，但絕大部份都講的多而亂，我初學的時候也是看的一臉懵逼润文。所以打算自己總結一篇關于FlexBox布局的文章姐呐，注重實用，而不是一大堆原理和廢話典蝌。

什么是FlexBox布局曙砂？

從字面上可以理解成：能夠很容易變化以適應外界條件變化的通用矩形容器，也就是我們常聽到的彈性布局骏掀。

作用

用來解決父盒子和子盒子之間的約束關系鸠澈，如下圖所示：

image.png

這里的父盒子和子盒子是相對來說的柱告，任何一個盒子都可能成為父/子盒子，這要看此時該盒子是屬于外層空間還是里層空間

Flex容器的屬性

flexDirection笑陈、justifyContent际度、alignItems、flexWrap

掌握這4個屬性涵妥，基本上就能實現布局千變萬化乖菱，接下來講解每一個的用法

1.flexDirection

作用：決定盒子的主軸方向。意思就是你想布局是往哪個方向走蓬网？是橫還是豎窒所？

屬性值：row、row-reverse帆锋、column吵取、column-reverse

image.png

如圖解所示：

row：主軸是水平方向，從左往右排列

row-reverse：主軸是水平方向窟坐，從右往左排列

column：主軸是垂直方向海渊，從上往下排列

column-reverse：主軸是垂直方向，從下往上排列

其中：column是作為默認的主軸屬性哲鸳。意思就是，如果不特意設置flexDirection,那么盔憨，該盒子的主軸默認方向就是flex-direction:column

2.justifyContent

作用：決定盒子在主軸（水平）的對齊方向

屬性值：flex-start徙菠、flex-end、center郁岩、space-between婿奔、space-around

image.png

如圖解所示：

flex-start:左對齊

flex-end：右對齊

center:居中

space-between:兩端對齊，盒子之間的間隔都相等

space-around:每個盒子兩側的間隔相等问慎。盒子之間的間隔比盒子與邊框的間隔大一倍

其中：flex-start是作為默認的主軸對齊方向萍摊。意思就是，如果不特意設置flex-start,那么如叼，盒子的主軸對齊方向就是flex-start

3.alignItems

作用：決定盒子在交叉軸（垂直）的對齊方向

屬性值：flex-start冰木、flex-end、center笼恰、baseline踊沸、stretch

image.png

如圖解所示：

flex-start：交叉軸的起點對齊

flex-end：交叉軸的終點對齊

center：交叉軸的中點對齊

stretch：如果項目未設置高度或設為auto，將占滿整個容器的高度

baseline：項目的第一行文字的基線對齊

4.flex-wrap

作用：決定盒子是否排列在一條軸線上社证。說白了逼龟，就是需不需要換行顯示。

屬性值：nowrap追葡、 wrap腺律、wrap-reverse

image.png

如圖解所示：

nowrap：不換行奕短，如果父盒子有長度限制，那么多出的部分將會看不見匀钧。

wrap：換行翎碑，第一行在上面。如果父盒子有長度限制榴捡，那么剩余空間不夠的情況下將會換行顯示杈女。

wrap-reverse：換行，第一行在下面吊圾。如果父盒子有長度限制达椰，那么剩余空間不夠的情況下將會換行顯示。

總結

4個屬性项乒，flexDirection控制主軸方向啰劲，justifyContent和alignItems負責控制水平和垂直對齊方向，flexWrap就控制是否換行檀何。就這么簡單蝇裤！

在我個人實際開發(fā)中，可以利用好ReactNative的開發(fā)者模式中的Hot Reloading频鉴，開啟這個可以實時看到UI布局的變化栓辜。再配合borderWidth這一屬性，為每個UI元素添加邊框垛孔，這樣就能很靈活的調動UI布局藕甩。下面是我自己寫的布局例子：

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View, Dimensions
} from 'react-native';
const screenWidth = Dimensions.get('window').width;  //屏幕的寬度
const screenHeight = Dimensions.get('window').height;  //屏幕的高度

export default class Demo extends Component {
render() {
 return (
     <View style={styles.firstContainer}>
         <View style={styles.secondContainer}>
             <View style={styles.textContainer}>
                 <Text style={styles.welcome}>
                     Welcome to React Native!
                 </Text>
             </View>
             <View style={styles.textContainer}>
                 <Text style={styles.instructions}>
                     To get started, edit index.android.js
                 </Text>
             </View>
             <View style={styles.textContainer}>
                 <Text style={styles.instructions}>
                     Double tap R on your keyboard to reload,{'\n'}
                     Shake or press menu button for dev menu
                 </Text>
             </View>
         </View>
     </View>
 );
}
}

const styles = StyleSheet.create({
firstContainer: {
   flexDirection: 'column',height:screenHeight,
   width:screenWidth, justifyContent: 'center',
   alignItems: 'center'
},
secondContainer: {
   flexDirection:'column',height:0.3*screenHeight,
   width:0.8*screenWidth,borderWidth:1,
   justifyContent: 'center',alignItems: 'center'
},
textContainer: {
   flexDirection:'row',borderWidth:1,
   justifyContent: 'center',alignItems: 'center'
},
welcome:{
   fontSize: 20,margin: 10
}
 instructions:{
   marginBottom: 5
}
});

AppRegistry.registerComponent('Demo', () => Demo);

1548828942423.gif