flex布局

作者: QinRenMin | 来源:发表于2018-08-08 17:45 被阅读0次

flex布局
初见FLEX
Flex 布局教程
css flex布局详解
Flex
flex布局学习笔记
6Flex 布局
css flex
Flex布局（语法篇）
Day02_flex布局

flexDirection
作用：决定布局的主轴
column：从上往下堆叠主轴：纵向默认值
row ：从左至右堆叠主轴：横向
column.png
row.png
justifyContent
作用：决定子元素沿着主轴方向的排列方式

flex-start:从主轴处开始

column_start.png

row_start.png

flex-end:从主轴结束处开始

column_end.png

row_end.png

center:主轴中心部

colmun_center.png

row_center.png

space-around:

column_around.png

row_around.png
space-between

column_between.png

row_between.png

space-evenly

column_evenly.png

row_evenly.png
补充内容：
space-between
元素会平均地分布在行（列）里。如果最左边的剩余空间是负数，或该行只有一个子元素，则该值等效于'flex-start';超过一个元素，则先确定首末元素的位置，然后再均分剩余空白位置
0-x-xx-0
space-around
弹性盒子元素会平均地分布在行里，两端保留子元素与子元素之间间距大小的一半。如果最左边的剩余空间是负数，或该行只有一个伸缩盒项目，则该值等效于'center'。在其它情况下，伸缩盒项目则平均分布，并确保两两之间的空白空间相等，同时第一个元素前的空间以及最后一个元素后的空间为其他空白空间的一半。
x-2x-2x-x
space-evenly
均匀分布所有
x-x-x-x

代码例子：

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
import React, { Component } from 'react';
import { StyleSheet,View } from 'react-native';

export default class App extends Component {
    render() {
        return (
            <View style = {S.container}>
                <View style = {S.subBox}>

                </View>
                <View style = {S.centerBox}>

                </View>
                <View style = {S.bottomBox}>

                </View>
            </View>
        );
    }
}

const S = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'pink',
        flexDirection: 'column',
//        flexDirection: 'row',
        justifyContent: 'flex-start',
//        justifyContent: 'flex-end',
//        justifyContent: 'center',
//        justifyContent: 'space-around',
//        justifyContent: 'space-between',
//        justifyContent: 'space-evenly',
     
    },
    subBox:{
        height:100,
        width: 100,
        backgroundColor: 'red'
    },
    centerBox:{
        height:100,
        width:100,
        backgroundColor:'blue',
    },
    bottomBox:{
        height:100,
        width:100,
        backgroundColor:'yellow',
    },
});