Uni-App 横向布局和纵向布局

最新推荐文章于 2025-03-01 10:12:35 发布

却染人间愁

最新推荐文章于 2025-03-01 10:12:35 发布

阅读量1k

点赞数

分类专栏：个人积累文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/victor_E_N_01185/article/details/129363613

版权

个人积累专栏收录该内容

31 篇文章

订阅专栏

文章展示了如何使用Uni-App的模板和样式实现横向和纵向布局，通过定义多个CSS类实现不同颜色的块状元素排列，每个元素具有特定的宽度和高度比例，以达到灵活的布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点滴积累，贵在坚持，感谢你的阅览！

备注：下面代码参考的是 Uni-App 官方 Demo 源代码

效果图如下：

代码如下：

<template>
    <view>
        <view class="row">
            <text>横向布局</text>
        </view>
        <!-- 注意这里的class定义了多个key，而不是一个key，下面也是的，TNND，一直以为这里key中间可以带空格呢，没想到可以定义多个key -->
        <view class="row-parent row-item">
            <view class="row-style style-red">1</view>
            <view class="row-style style-green">2</view>
            <view class="row-style style-blue">3</view>
        </view>
        <view class="column">
            <text>纵向布局</text>
        </view>
        <view class="column-parent column-item">
            <view class="column-style style-red">1</view>
            <view class="column-style style-green">2</view>
            <view class="column-style style-blue">3</view>
        </view>
    </view>
</template>

<style>
    .row-parent {
        width: 450upx;
        height: 150upx;
    }
    .row-item {
       display: flex;
       flex-direction: row;//设置布局方向为水平
    }
    .column-parent {
        height: 450upx;
        width: 450upx;
    }
    .column-item {
       display: flex;
       flex-direction: column;//设置布局方向为竖直
    }
    .row-style {
        text-align: center;
        width: 33.33%;//每个元素宽度占比父类的三分之一
        height: 150upx;
        line-height: 150upx;
    }
    .column-style {
        text-align: center;//实际起到了文本水平居中的效果
        width: 450upx;
        height: 33.33%;//每个元素高度占比父类的三分之一
        line-height: 150upx;//实际起到了文本竖直居中的效果
    }
    .style-red {
        background-color: #ff0000;
    }
    .style-green {
        background-color: #00ff00;
    }
    .style-blue {
        background-color: #0000ff;
    }
</style>