0


浅谈uniapp的flex布局

文章目录

1 flex布局

​ flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。设置Flex布局也很简单直接css中,设置它的

display:flex

1.1 flex-direction

​ 容器类元素排列方向,它有四个参数可以选择。row(从左至右); row-reverse (从右至左); column(从上到下); column-reverse(从下到上)。

<template>
    <view style="display: flex;flex-direction: row;">
        <view class="borderClass">A</view>
        <view class="borderClass">B</view>
        <view class="borderClass">C</view>
        <view class="borderClass">D</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 上面例子中flex-direction: row,表示从左到右,展示如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kQ1DgIjl-1652190460169)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223427355.png)]

​ 如果设置成这样flex-direction: column,表示从上到下,则会变成如下的展示方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-skv2zVQ0-1652190460177)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223629300.png)]

​ 如果设置成这样flex-direction: row-reverse,表示从右到左,则会变成如下的展示方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yOlKlFnx-1652190460179)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223814306.png)]

​ 如果设置成这样flex-direction: column-reverse,表示从下到上,则会变成如下的展示方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7YBPJTp8-1652190460191)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509223903483.png)]

1.2 flex-wrap

​ flex-wrap用来表示容器内的元素换行,它有三个参数选择:nowrap(不换行);wrap(换行 );wrap-reverse(反向换行)。

<template>
    <view style="display: flex;flex-direction: row;flex-wrap:wrap;">
        <view class="borderClass">A</view>
        <view class="borderClass">B</view>
        <view class="borderClass">C</view>
        <view class="borderClass">D</view>
        <view class="borderClass">E</view>
        <view class="borderClass">F</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 上面例子设置为flex-wrap:wrap;表示换行,展示如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AnWmX8DX-1652190460193)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225000243.png)]

​ 设置为flex-wrap:wrap;表示不换行,展示如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMUUcYlV-1652190460194)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225033208.png)]

1.3 justify-content

​ 容器内元素在主轴的对齐方式,它主要有五个可选参数:flex-start(左对齐); flex-end(右对齐); center(居中对齐);space-between (等距对齐,两端对齐,空白分配在元素中间; space-around (等距对齐,两端对齐,但是两边留白)。

<template>
    <view style="display: flex;flex-direction: row;justify-content:space-between;">
        <view class="borderClass">A</view>
        <view class="borderClass">B</view>
        <view class="borderClass">C</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 展示效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1pqZwvU-1652190460196)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225658708.png)]

​ 如果改成justify-content:space-around;表示如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AW3hFnnW-1652190460197)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220509225751706.png)]

1.4 align-items

​ 定义容器内元素在纵轴上如何排列以及处理空白部分,主要有下面几个参数可选:stretch(如果容器内元素未设置高度,则默认元素高度为容器高度); flex-start(容器的纵轴上部对齐); flex-end ( 容器的纵轴下部对齐); center(在容器的纵轴中部对齐); baseline (如果容器中的元素中有文字,则按文字底部对齐)。

<template>
    <view style="display: flex;align-items:center;">
        <view class="heightAutoClass">A</view>
        <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view>
        <view class="heightAutoClass">C</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 在这里要注意,上面三个元素中只有一个元素的高度是指定的,运行上面代码,展示如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-APFuDy16-1652190460198)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073435690.png)]

​ 如果将属性改成align-items:baseline,那么展示如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WDJauJuc-1652190460199)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073611838.png)]

​ 如果将属性设置为align-items:stretch,注意针对没有设置明确高度的元素生效,那么展示如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H5N0710k-1652190460202)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510073734622.png)]

1.5 align-content属性

​ 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用(垂直方向)。align-content有六个值: flex-start | flex-end | center | space-between | space-around | stretch,分别对应整体靠上,整体靠下,整体居中,整体垂直拉伸,整体垂直均匀排列,整体均匀分布且垂直两端保留间距一半空间。

<template>
    <view style="display: flex;flex-wrap: wrap;border: 1upx solid red;height: 800upx;align-content: center;">
        <view class="heightAutoClass">A</view>
        <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;">B</view>
        <view class="heightAutoClass">C</view>
        <view class="borderClass">D</view>
        <view class="borderClass">E</view>
        <view class="borderClass" style="width: 200upx;">F</view>
        <view class="borderClass">G</view>
        <view class="borderClass">H</view>
        <view class="borderClass">I</view>
        <view class="borderClass">J</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 运行上面代码,呈现整体居中的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cxjYN4Uj-1652190460204)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510074646669.png)]

​ 如果改成align-content: space-between,变成如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UHMXTTLp-1652190460205)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510074747688.png)]

​ 如果改成align-content: space-around,则展示如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gQZ9Y2TJ-1652190460207)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510082656272.png)]

​ 如果改成align-content: stretch,则展示如下,这也是默认值

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PeTpfPXU-1652190460208)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510082826193.png)]

1.6 其他项目属性

1.6.1 order属性

​ 定义项目的排列顺序。数值越小,排列越靠前,默认为0。

<template>
    <view style="display: flex;">
        <view class="heightAutoClass" style="order: 2;">A</view>
        <view style="width: 100upx;height: 200upx;background-color: #4CD964;margin: 20upx;order: 1;">B</view>
        <view class="heightAutoClass" style="order: 3;">C</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 运行上面代码展示结果如下,B排在第一,A排在第二和配置信息一致

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zbcHgatF-1652190460209)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510084046599.png)]

1.6.2 flex-grow属性

​ 定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。

<template>
    <view style="display: flex;">
        <view class="borderClass">A</view>
        <view class="borderClass" style="flex-grow: 2;">B</view>
        <view class="borderClass">C</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 运行上面代码,展示内容如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gDn2mfTL-1652190460210)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510084828241.png)]

​ 注:如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

1.6.3 flex-shrink属性

​ 定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

<template>
    <view style="display: flex;">
        <view class="borderClass">A</view>
        <view class="borderClass">B</view>
        <view class="borderClass">C</view>
        <view class="borderClass" style="flex-shrink: 0;">D</view>
        <view class="borderClass">E</view>
        <view class="borderClass">F</view>
        <view class="borderClass">G</view>
        <view class="borderClass">H</view>
        <view class="borderClass">I</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 运行上面代码展示结果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mK4PBJxC-1652190460211)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510085207332.png)]

​ 这是因为所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效。上面的例子中元素D没有压缩。

1.6.4 flex属性

​ 是flex-grow(放大比例), flex-shrink(缩小比例) 和 flex-basis(计算多余空间)的简写,默认值为0。可选1和auto,也可以是其他数字。

<template>
    <view style="display: flex;border: 1px solid red;">
        <view class="borderClass" style="flex:1">A</view>
        <view class="borderClass" style="flex:1.5">B</view>
        <view class="borderClass" style="flex:2">C</view>
        <view class="borderClass" style="flex:2.5">C</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        methods: {
          
        }
    }
</script>

<style>
    .borderClass{
        width: 100upx;
        height: 200upx;
        background-color: #4CD964;
        margin: 20upx;
    }
    
    .heightAutoClass{
        width: 100upx;
        background-color: #4CD964;
        margin: 20upx;
    }
</style>

​ 运行上面代码,展示结果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KzeSZh5V-1652190460212)(D:\developsoftware\mayun\note\study-note\uniapp\image\image-20220510214618974.png)]

标签: css css3 前端

本文转载自: https://blog.csdn.net/qq_36305027/article/details/124677790
版权归原作者 dream21st 所有, 如有侵权,请联系我们删除。

“浅谈uniapp的flex布局”的评论:

还没有评论