React Layout - flex direction & align

styles option

 

flexDirection

: VIew 에서 자식요소의 나열 방향을 작성,

 기본은 "column 으로 세로 방향 으로 자식요소들을 나열 하며, "row"는 가로 방향이다.

 

alignItems

: flexDirection row 를 기준으로 자식요소들을 나열시, flex-start(좌측끝), center, flex-end(우측끝), stretch(늘이기)

 

justifyContent

: flexDirection row 를 기준으로 자식요소들을 나열시, flex-start, center, flex-end

, space-between(좌우요소기준균등정렬), space-around(좌우공백기준균등정렬)

 

 

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

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
	<View style={styles.container}>
      <View style={styles.rowcontainer1}>
        <View style={styles.row1} />
        <View style={styles.row2} />
        <View style={styles.row3} />
      </View>
	  <View style={styles.rowcontainer2}>
	    <View style={styles.row11} />
        <View style={styles.row12} />
        <View style={styles.row13} />
      </View>
	  <View style={styles.colcontainer1}>
	    <View style={styles.col1} />
        <View style={styles.col2} />
        <View style={styles.col3} />
      </View>
	</View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
	flexDirection: "column",
  },
  rowcontainer1: {
    flex: 1,
	flexDirection: "row",
    justifyContent: 'space-between',
  },
  rowcontainer2: {
    flex: 1,
	flexDirection: "row",
    justifyContent: 'space-around',
	borderColor:'#eee',
    borderBottomWidth:10.5,
  },
  colcontainer1: {
    flex: 1,
	flexDirection: "column",
	justifyContent: "space-around",
	paddingLeft: 10,
  },
  row1: {
    width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#fccb00',
  },
  row2: {
    width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#8f7300',
  },
  row3: {
    width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#4a3b00',
  },
  row11: {
    width:50,
    height:50,
	borderRadius: 5,
    backgroundColor: '#ffac00',
  },
  row12: {
    width:50,
    height:50,
	borderRadius: 5,
    backgroundColor: '#db3e00',
  },
  row13: {
    width:50,
    height:50,
	borderRadius: 5,
    backgroundColor: '#b80000',
  },
  col1: {	
    width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#1273de',
  },
  col2: {
	width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#4c99ee',
  },
  col3: {	
    width:50,
    height:50,
	borderRadius: 25,
    backgroundColor: '#80b5f0',
  },
});