FlexBoxまとめ

FlexBoxフレックスレイアウトはReact Nativeのレイアウトで、機能が豊富で、ページの大量のレイアウトニーズを満たすことができます.RNのFlexBoxとHtml 5の差は大きくなく,原理はほぼ同じである.
3つの属性flexDirection、justifyContent、alignItemsを持つ
flexDirection
flexDirectionは、サブエレメントの主軸方向を決定し、水平軸または垂直軸に沿って配置します.デフォルトはcolumnです.
4つの属性値があります.

row:水平左から右へ

row-reverse:水平右から左

column:上下

column-reverse:垂直に下から上へ.

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      //    `flexDirection`  `column`  
      <View style={{flex: 1, flexDirection: 'row'}}>
        <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
      </View>
    );
  }
};

justifyContent
justifyContentは、サブエレメントの主軸上の位置合わせを決定する方法です.
次の属性値があります.

flex-start:主軸に沿って決定された方向に、始点が整列(デフォルト)

center:主軸が定める方向に沿って、中央に整列する

flex-end:主軸が決定する方向に沿って、終点が

に整列する.

space-around:主軸に沿って決定された方向に、要素は均一に配列され、各要素の周囲には同じ空間

が割り当てられる.

space-between:主軸に沿って決定された方向に、要素は均一に配列され、両端は

に整列する.

space-evenly:主軸に沿って決定された方向に、要素は均一に配列され、各要素間の間隔は

である.

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-evenly',
}}>
    <View style={{width: 50, height: 50, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 50, backgroundColor: 'blue'}}/>
</View>

alignItems
alignItemsは主軸に垂直な軸の位置合わせです
次の属性値があります.

flex-start:垂直軸方向、始点揃え

flex-end:垂直軸方向、終点整列

center:および垂直軸方向、中央揃え

baseline:垂直軸方向、ベースライン位置合わせ

stretch:要素が(幅)高さを設定していない場合、または(幅)高さがautoの場合、

が満たされます(デフォルト)

<View style={{
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: "stretch"
}}>
    <View style={{width: 50, height: 200, backgroundColor: 'red'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'green'}}/>
    <View style={{width: 50, height: 200, backgroundColor: 'blue'}}/>
</View>

こんなにたくさん言って、これはLinearlayoutとRelativeLayoutの結合体ではありませんか