FlexBox布局小课堂

2019-12-02 本文已影响0人白公子是猫奴

前言

在 ReactNative 刚流行的时候有幸学习了一段时间，后来发现FlexBox布局思想在很多地方都是贯通的，学会这种思想就很容易入手其他语言的布局方式，比如H5的CSS、现在流行的Flutter、还有iOS的一个框架 Texture(AsyncDisplayKit)。所以我来给小小的总结一下。

css盒子模型: 每个盒子由四个部分（或区域）组成，由它们各自的边缘定义：内容边缘，填充边缘，边框边缘和边距边缘。

盒状模型.png

FlexBox弹性盒模型:Flex 是 The Flexible Box Module 的缩写，意为"弹性布局"，通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性。目前支持所有浏览器。

一、体验FlexBox布局

我们简单粗暴，直接上代码来看看到底怎么个“弹性”，现在来实现一个控件在父容器居中：

示例.png

iOS 布局方式：

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor lightGrayColor];
    UIView *centerView = [[UIView alloc] init];
    [self.view addSubview:centerView];
    centerView.frame = CGRectMake(0, 0, 100, 100);
    centerView.center = self.view.center;
    centerView.backgroundColor = [UIColor yellowColor];

    UILabel *centerLabel = [[UILabel alloc] init];
    [self.view addSubview:centerLabel];
    centerLabel.frame = CGRectMake(0, 0, 50, 50);
    centerLabel.center = self.view.center;
    centerLabel.backgroundColor = [UIColor redColor];
    centerLabel.text = @"中心";
    centerLabel.textColor = [UIColor whiteColor];
    centerLabel.textAlignment = NSTextAlignmentCenter;   
}

HTML写法：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>

<style type='text/css'>
    body,
    html {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .baseStyle {
        margin: auto;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    .backViewStyle {
        width: 100%;
        height: 100%;
        background: gray;
    }

    .centerViewStyle {
        width: 100px;
        height: 100px;
        background: yellow;

    }

    .centerLabelStyle {
        width: 50px;
        height: 50px;
        background: red;
        text-align: center;
        color: white;
    }
</style>

<body>
    <div class=".backViewStyle">
        <div class="centerViewStyle baseStyle">
            <div class="centerLabelStyle baseStyle">
                <p>中心</p>
            </div>
        </div>
    </div>
</body>

</html>

RN中 FlexBox 写法：

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

const practice: () => React$Node = () => {
    return (
        <View style={styles.backViewStyle}>
            <View style={styles.centerViewStyle}>
                <Text style={styles.centerTextStyle}>中心</Text>
            </View>
        </View>
    );
};

const styles = StyleSheet.create({
    backViewStyle: {
        flex: 1, //全屏
        backgroundColor: 'gray',
        alignItems: "center", // 设置子组件在父元素的侧轴（默认水平方向），方向上居中
        justifyContent: "center" // 设置子组件在父元素的主轴（默认竖直方向），方向上居中
    },
    centerViewStyle: {
        height: 100,
        width: 100,
        backgroundColor: "yellow",
        justifyContent: 'center',
        alignItems: 'center',
    },
    centerTextStyle: {
        height: 50,
        width: 50,
        color: 'white',
        backgroundColor: "red",
        justifyContent: "center",
        textAlign: "center",
        fontSize: 14,
        paddingTop: 18
    },
});

export default practice;

HTML 设置全屏要设置html与body的宽高是100%，在设置父元素（灰色的View）宽高为100%，RN只需要设置父组件的样式属性flex为1。
HTML 设置水平方向的居中方式是把居中的子元素都设置为margin:0,RN 只需要父组件的样式属性justifyContents:"center"。
HTML设置垂直居中方式是子元素设置margin:auto; postion:absolute; top:0; left:0; bottom:0; right:0; 并且该子元素要设置宽和高，RN只需父组件的样式属性alignItems:"center"，便可实现所有的子组件都垂直居中。

总结: 欧吼～ FlexBox 布局可以大大减少布局的代码量，使布局逻辑更加清晰真是优秀呢，你觉得呢？(我不要你觉得，我要我觉得😁)

好啦。对比完了我们来系统的学习下FlexBox布局吧

FlexBox 布局思想

子组件有能力改变其宽、高以及顺序，以最佳的方式来填充可用空间。

FlexBox布局原理

每个组件默认存在两根轴

主轴（ main axis ）默认是垂直方向
侧轴（ cross axis ）垂直的交叉轴

FlexBox 的主要属性

在 React Native中，有 4个容器属性， 2个项目属性，分别是：

容器属性：
1.Flex Direction 决定主轴的方向（子组件的排列方向）

row：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column ：主轴为垂直方向，起点在上沿。( 默认值 )
column-reverse：主轴为垂直方向，起点在下沿。

2. Flex Wrap 让组件的子组件都排在一条线

nowrap：不换行 ( 默认值 )
wrap:换行第一行在上方
wrap-reverse换行，第一行在下方

主轴为水平方向：

wrap-reverse.png

wrap.png

注：如果设置wrap不起作用，是因为版本的问题，此时只需给他设置一个alignItems属性

3. Justify Content 定义了伸缩项目在主轴线的对齐方式

flex-start：伸缩项目向一行的起始位置靠齐。( 默认值 )
flex-end：伸缩项目向一行的结束位置靠齐。
center：伸缩项目向一行的中间位置靠齐。
space-between：两端对齐，项目之间的间隔都相等。
space-around：伸缩项目会平均地分布在行里，两端保留一半的空间。

4. Align Items 定义项目在交叉轴上如何对齐，可以把其想像成侧轴（垂直于主轴）的 “对齐方式 ”。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为 auto（子元素在次轴方向上不可以有定宽高），将占满整个容器的高度。

项目属性：

Flex 可设置子组件在父组件主轴上所占的比例（除去定宽高部分）
Align Self 设置某个子组件在侧轴的对齐方式可覆盖align-items属性。
auto | flex-start | flex-end | center | baseline | stretch
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。其余与alignItems意思相同。

到此就结束啦 👏 希望对大家有帮助哦 🎉🎉🎉

分享两个练习工具：
Playground
青蛙游戏