uni-app布局之display: flex

最近开始学习uni-app，其中页面布局是很重要的一块，于是我从display开始进行研究。在css的发展过程中display有几十种写法，有兴趣的同学可以参考这篇文章
https://www.cnblogs.com/gongyijie/p/8358836.html
弹性布局flex是目前使用很广泛也很强大的布局方法之一。

以下内容我主要参考了这篇文章，有兴趣的可以去看看
https://www.cnblogs.com/Webzhoushifa/p/9510856.html

这里有我转载了一篇讲解更详细的flex文章
https://www.jianshu.com/p/a5df93c89702

我们主要涉及到以下6个属性

flex-direction 容器内项目的排列方向(默认横向排列)

row 横向布局
column 竖直布局

justify-content 项目在主轴上的对齐方式

flex-start 主轴从开始位置开始排列
flex-end 主轴从结束位置开始排列
center 主轴居中排列
space-between 主轴两头对齐等间距排列

align-items 项目在交叉轴上如何对齐

flex-start 交叉轴从开始位置开始排列
flex-end 交叉轴从结束位置开始排列
center 交叉轴居中排列
stretch 交叉轴拉伸铺满

flex-wrap 容器内项目换行方式

inherit 继承父试图的换行规则
initial 初始的
nowrap 不换行(默认)
wrap 换行
wrap-reverse 换行

flex-flow 是flex-direction和flex-wrap的简写方式

align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线则不起作用

flex-start 靠近开始位置排列
flex-end 靠近结束位置排列
center 居中排列
space-around 等间距排列(默认)
space-between 两头对齐等间距排列
inherit 集成父试图的值
initial 初始值
stretch 拉伸铺满

一、flex-direction justify-content align-items配合使用

通过如下几种场景来学习这三个属性的用法。

1、默认的布局

<template>
    <view>
        <view class="content">
            <view class="a">block</view>
            <view class="a">blockblock</view>
            <view class="a">blockblockblock</view>
            <view class="a">blockblock</view>
            <view class="a">block</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 100upx;
        background-color: #4CD964;
        border: 1upx solid #FFFFFF;
    }

</style>

display-default.jpg

2、使用flex竖直布局靠左侧对齐

<template>
    <view>
        <view class="content">
            <view class="a">block</view>
            <view class="a">blockblock</view>
            <view class="a">blockblockblock</view>
            <view class="a">blockblock</view>
            <view class="a">block</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 100upx;
        background-color: #4CD964;
        border: 1upx solid #FFFFFF;
    }

</style>

flex-01.jpg

3、主轴从结束为止排列，交叉轴居中排列

<template>
    <view>
        <view class="content">
            <view class="a">block</view>
            <view class="a">blockblock</view>
            <view class="a">blockblockblock</view>
            <view class="a">blockblock</view>
            <view class="a">block</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 100upx;
        background-color: #4CD964;
        border: 1upx solid #FFFFFF;
    }

</style>

flex-02.jpg

二、flex-wrap换行规则

1、默认为不换行

<template>
    <view>
        <view class="content">
            <view class="a">block-01</view>
            <view class="a">block-02</view>
            <view class="a">block-03</view>
            <view class="a">block-04</view>
            <view class="a">block-05</view>
            <view class="a">block-06</view>
            <view class="a">block-07</view>
            <view class="a">block-08</view>
            <view class="a">block-09</view>
            <view class="a">block-10</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 18vh;
        background-color: #4CD964;
        border: 1vh solid #FFFFFF;
    }

</style>

我们将flex-wrap设置为inherit和initial时显示效果都是一样的，使用了默认不换行的规则，父试图也没有单独设置换行规则，那么也是使用默认不换行的规则

flex-03.jpg

即使我们设置了高度，但是还是被压缩了

2、换行wrap

<template>
    <view>
        <view class="content">
            <view class="a">block-01</view>
            <view class="a">block-02</view>
            <view class="a">block-03</view>
            <view class="a">block-04</view>
            <view class="a">block-05</view>
            <view class="a">block-06</view>
            <view class="a">block-07</view>
            <view class="a">block-08</view>
            <view class="a">block-09</view>
            <view class="a">block-10</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 18vh;
        background-color: #4CD964;
        border: 1vh solid #FFFFFF;
    }

</style>

flex-04.jpg

后面的元素被挤到了第二列

3、换行wrap-reverse

<template>
    <view>
        <view class="content">
            <view class="a">block-01</view>
            <view class="a">block-02</view>
            <view class="a">block-03</view>
            <view class="a">block-04</view>
            <view class="a">block-05</view>
            <view class="a">block-06</view>
            <view class="a">block-07</view>
            <view class="a">block-08</view>
            <view class="a">block-09</view>
            <view class="a">block-10</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap-reverse;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 18vh;
        background-color: #4CD964;
        border: 1vh solid #FFFFFF;
    }

</style>

flex-05.jpg

前面的元素被挤到了第二列

三、flex-flow

1、默认效果(inherit、initial、space-around)

<template>
    <view>
        <view class="content">
            <view class="a">block-01</view>
            <view class="a">block-02</view>
            <view class="a">block-03</view>
            <view class="a">block-04</view>
            <view class="a">block-05</view>
            <view class="a">block-06</view>
            <view class="a">block-07</view>
            <view class="a">block-08</view>
            <view class="a">block-09</view>
            <view class="a">block-10</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-flow: column wrap-reverse;
        justify-content: flex-start;
        align-items: center;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 18vh;
        background-color: #4CD964;
        border: 1vh solid #FFFFFF;
    }

</style>

这是一种简写模式，同flex-05.jpg

四、align-content

1、默认效果(inherit、initial、space-around)

<template>
    <view>
        <view class="content">
            <view class="a">block-01</view>
            <view class="a">block-02</view>
            <view class="a">block-03</view>
            <view class="a">block-04</view>
            <view class="a">block-05</view>
            <view class="a">block-06</view>
            <view class="a">block-07</view>
            <view class="a">block-08</view>
            <view class="a">block-09</view>
            <view class="a">block-10</view>
            <view class="a">block-11</view>
        </view>
        
    </view>
</template>

<script>    
    export default{
        data() {
            return {
                
            }
        },
        methods: {
            
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-flow: column wrap;
        align-content: inherit;
        justify-content: flex-start;
        align-items: center;
        background-color: #C8C7CC;
        width: 100vw;
        height: 100vh;
    }
    .a {
        height: 18vh;
        background-color: #4CD964;
        border: 1vh solid #FFFFFF;
    }

</style>

space-around.png

2、flex-start

flex-start.png

3、flex-end

flex-end.png

4、center

center.png

5、space-between

space-between.png