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

た入场券 2024-03-26 18:14 124阅读 0赞

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

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

效果图如下：

![e2bcb00c4bcfd39341b4b3ca66e86058.png][]

代码如下：

<template>
        <view>
            <view class="row">
                <text>横向布局</text>
            </view>
            
            <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>

[Uni-App]: https://so.csdn.net/so/search?q=Uni-App&spm=1001.2101.3001.7020
[e2bcb00c4bcfd39341b4b3ca66e86058.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/2136179591e34f64b580f2e645930002.png

发表评论取消回复

表情：

评论列表（有 0 条评论，124人围观）

还没有评论，来说两句吧...

相关阅读

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

点滴积累，贵在坚持，感谢你的阅览！备注：下面代码参考的是 Uni-App 官方 Demo 源代码效果图如下： ![2890e16826644a4fa65ac9ac76

╰半夏微凉°/ 2024年04月07日 14:52/ 0 赞/ 114 阅读

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

点滴积累，贵在坚持，感谢你的阅览！备注：下面代码参考的是 [Uni-App][] 官方 Demo 源代码效果图如下： ![e2bcb00c4bcfd39341b4b3

た入场券/ 2024年03月26日 18:14/ 0 赞/ 125 阅读

相关 Android中使用HorizontalScrollView横向滑动布局

在Android中，ListView通常用来实现纵向滚动的列表，而HorizontalScrollView则可以实现横向滚动的列表项。引入HorizontalScrollV

我不是女神ヾ/ 2024年02月18日 23:45/ 0 赞/ 87 阅读

相关 MATLAB数组的横向和纵向拼接

横向拼接，因为我这里有元素为元祖，用了\{\} outtemp={date{1} position(i,1) position(i,2) position(i,3)

以你之姓@/ 2022年11月06日 14:53/ 0 赞/ 300 阅读

相关 ExtJS4 表单横向布局

效果图： ![Center][] 源码: var win = Ext.create("Ext.window.Window", \{ title: "审计底稿",

谁借莪１个温暖的怀抱￠/ 2022年09月25日 03:29/ 0 赞/ 192 阅读

相关【JQuery】——横向纵向菜单

【HTML】 <html> <head> <title>JQuery实战-菜单效果</title> <meta http-equ

谁借莪１个温暖的怀抱￠/ 2022年07月14日 00:43/ 0 赞/ 222 阅读

相关横向越权和纵向越权

横向越权：横向越权指的是攻击者尝试访问与他拥有相同权限的用户的资源纵向越权：纵向越权指的是一个低级别攻击者尝试访问高级别用户的资源如何防止横向越权漏洞： 1.

╰+哭是因爲堅強的太久メ/ 2022年06月06日 10:58/ 0 赞/ 199 阅读

相关 SQL纵向变成横向，横向变成纵向（经典案例添加自己的想法）

\------------------------------------------- name subject result 张三语文 73 张三数学 83

た入场券/ 2021年12月10日 19:23/ 0 赞/ 349 阅读

相关 ExtJs 3.4.0 表单column布局（纵向，列布局）

column布局（纵向，列布局） \{ layout:'column', items:\[\{ columnWidth:1 / 2, // 平分宽度 la

电玩女神/ 2021年09月26日 12:12/ 0 赞/ 392 阅读

相关 uniapp之flex布局

flex布局概念 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。采用 Flex 布局的元素，称为 F

古城微笑少年丶/ 2021年09月13日 15:54/ 0 赞/ 1989 阅读