Flex

Flex

Flexbox,就可以在不同屏幕尺寸上提供一致的佈局結構。 雖然跟網頁 CSS 的 flex 很像,但是還是有些為的差異 例如: flexDirection 在網頁中預設是 row,在 RN 裡面預設為 column

FLexBox

flexDirection 決定佈局的 主軸可設定子元素是水平排列還是垂直排列

  • column 垂直排列 (預設)
  • row 水平排列

justifyContent 可以決定其子元素沿着 主軸 的排列方式

  • flex-start 主軸起始位置
  • center 主軸中心
  • flex-end 主軸末端
  • space-around 根據主軸均勻分布空白
  • space-between 根據主軸均勻分布物件

alignItems 可以決定其子元素沿着 次軸 的排列方式

  • flex-start 次軸起始位置
  • center 次軸中心
  • flex-end 次軸末端
  • space-around 根據次軸均勻分布空白
  • space-between 根據次軸均勻分布物件

使用範例

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Image,
  Text,
} from 'react-native';

export default class FlexSample extends Component {
  render() {
    return (
      <View style={{ flex: 1  }}>
        <View style={{ flex: 1, backgroundColor: 'blue' }}>
          <View style={{  flex: 1, backgroundColor: 'red', flexDirection: 'column', justifyContent: 'flex-start', alignItems: 'flex-end' }}>
            <Text style={{ color: 'white'  }}>右上</Text>
          </View>
          <View style={{  flex: 3, backgroundColor: 'green', justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ color: 'white'  }}>置中</Text>
          </View>
        </View>
        <View style={{ flex: 1, flexDirection: 'row' , backgroundColor: 'blue' }}>
          <View style={{  flex: 1, backgroundColor: 'blue', flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'flex-start' }}>
            <Text style={{ color: 'white'  }}>右上?</Text>
          </View>
          <View style={{  flex: 1, backgroundColor: 'yellow', alignItems: 'center', justifyContent: 'space-between'}}>
            <Text>1</Text>
            <Text>2</Text>
            <Text>3</Text>
          </View>
        </View>
      </View>
    );
  }
}

練習

flexboxfroggy - 用遊戲學習 css 的 flexbox 玩到第 12 關

延伸閱讀

yoga - Facebook 實作的跨平台 Flex library

results for ""

    No results matching ""