当前位置：首页 > news >正文

《uni-app跨平台开发完全指南》- 04 - 页面布局与样式基础

news 2025/11/7 7:19:23

uni-app：掌握页面布局与样式

新手刚接触uni-app布局可能会遇到以下困惑：明明在模拟器上完美显示的页面，到了真机上就面目全非；iOS上对齐的元素，到Android上就错位几个像素，相信很多开发者都经历过。今天就带大家摸清了uni-app布局样式的门道，把这些经验毫无保留地分享给大家，让你少走弯路。

一、Flex布局

1.1 为什么Flex布局是移动端首选？

传统布局的痛点：

/* 传统方式实现垂直居中 */
.container {position: relative;height: 400px;
}
.center {position: absolute;top: 50%;left: 50%;width: 200px;height: 100px;margin-top: -50px;  /* 需要计算 */margin-left: -100px; /* 需要计算 */
}

Flex布局：

/* Flex布局实现垂直居中 */
.container {display: flex;justify-content: center;align-items: center;height: 400px;
}
.center {width: 200px;height: 100px;
}

从对比中不难看出，Flex布局用更少的代码、更清晰的逻辑解决了复杂的布局问题。

1.2 Flex布局的核心概念

为了更好地理解Flex布局，我们先来看一下它的基本模型：

Flex容器 (display: flex)
├─────────────────────────────────┤
│ 主轴方向 (flex-direction) →     │
│                                 │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐
│ │ 元素1   │ │ 元素2   │ │ 元素3   │ ← Flex元素
│ └─────────┘ └─────────┘ └─────────┘
│                                 │
│ ↑                               │
│ 交叉轴方向                       │
└─────────────────────────────────┘

Flex布局的两大核心：

容器：设置display: flex的元素，控制内部项目的布局
元素：容器的直接子元素，受容器属性控制

1.3 容器属性

1.3.1 flex-direction：布局方向

这个属性决定了元素的排列方向，是Flex布局的基础：

.container {/* 水平方向，从左到右（默认） */flex-direction: row;/* 水平方向，从右到左 */flex-direction: row-reverse;/* 垂直方向，从上到下 */flex-direction: column;/* 垂直方向，从下到上 */flex-direction: column-reverse;
}

实际应用场景分析：

属性值	适用场景
`row`	水平导航、卡片列表
`column`	表单布局、设置页面
`row-reverse`	阿拉伯语等从右向左语言
`column-reverse`	聊天界面（最新消息在底部）

1.3.2 justify-content：主轴对齐

这个属性控制元素在主轴上的对齐方式，使用频率非常高：

.container {display: flex;/* 起始位置对齐 */justify-content: flex-start;/* 末尾位置对齐 */justify-content: flex-end;/* 居中对齐 */justify-content: center;/* 两端对齐，项目间隔相等 */justify-content: space-between;/* 每个项目两侧间隔相等 */justify-content: space-around;/* 均匀分布，包括两端 */justify-content: space-evenly;
}

空间分布对比关系：

start - 从头开始
end - 从尾开始
center - 居中对齐
between - 元素"之间"有间隔
around - 每个元素"周围"有空间
evenly - 所有空间"均匀"分布

1.3.3 align-items：交叉轴对齐

控制元素在交叉轴上的对齐方式：

.container {display: flex;height: 300rpx; /* 需要明确高度 *//* 交叉轴起点对齐 */align-items: flex-start;/* 交叉轴终点对齐 */align-items: flex-end;/* 交叉轴中点对齐 */align-items: center;/* 基线对齐（文本相关） */align-items: baseline;/* 拉伸填充（默认） */align-items: stretch;
}

温馨提示：align-items的效果与flex-direction密切相关：

当flex-direction: row时，交叉轴是垂直方向
当flex-direction: column时，交叉轴是水平方向

1.4 元素属性

1.4.1 flex-grow

控制元素放大比例，默认0（不放大）：

.item {flex-grow: <number>; /* 默认0 */
}

计算原理：

总剩余空间 = 容器宽度 - 所有元素宽度总和
每个元素分配空间 = (元素的flex-grow / 所有元素flex-grow总和) × 总剩余空间

示例分析：

.container {width: 750rpx;display: flex;
}
.item1 { width: 100rpx; flex-grow: 1; }
.item2 { width: 100rpx; flex-grow: 2; }
.item3 { width: 100rpx; flex-grow: 1; }/* 计算过程：
剩余空间 = 750 - (100+100+100) = 450rpx
flex-grow总和 = 1+2+1 = 4
item1分配 = (1/4)×450 = 112.5rpx → 最终宽度212.5rpx
item2分配 = (2/4)×450 = 225rpx → 最终宽度325rpx  
item3分配 = (1/4)×450 = 112.5rpx → 最终宽度212.5rpx
*/

1.4.2 flex-shrink

控制元素缩小比例，默认1（空间不足时缩小）：

.item {flex-shrink: <number>; /* 默认1 */
}

小技巧：设置flex-shrink: 0可以防止元素被压缩，常用于固定宽度的元素。

1.4.3 flex-basis

定义元素在分配多余空间之前的初始大小：

.item {flex-basis: auto | <length>; /* 默认auto */
}

1.4.4 flex

flex是flex-grow、flex-shrink和flex-basis的简写：

.item {/* 等价于 flex: 0 1 auto */flex: none;/* 等价于 flex: 1 1 0% */ flex: 1;/* 等价于 flex: 1 1 auto */flex: auto;/* 自定义 */flex: 2 1 200rpx;
}

1.5 完整页面布局实现

让我们用Flex布局实现一个典型的移动端页面：

<view class="page-container"><!-- 顶部导航 --><view class="header"><view class="nav-back">←</view><view class="nav-title">商品详情</view><view class="nav-actions">···</view></view><!-- 内容区域 --><view class="content"><!-- 商品图 --><view class="product-image"><image src="/static/product.jpg" mode="aspectFit"></image></view><!-- 商品信息 --><view class="product-info"><view class="product-name">高端智能手机 8GB+256GB</view><view class="product-price"><text class="current-price">¥3999</text><text class="original-price">¥4999</text></view><view class="product-tags"><text class="tag">限时优惠</text><text class="tag">分期免息</text><text class="tag">赠品</text></view></view><!-- 规格选择 --><view class="spec-section"><view class="section-title">选择规格</view><view class="spec-options"><view class="spec-option active">8GB+256GB</view><view class="spec-option">12GB+512GB</view></view></view></view><!-- 底部操作栏 --><view class="footer"><view class="footer-actions"><view class="action-btn cart">购物车</view><view class="action-btn buy-now">立即购买</view></view></view>
</view>

.page-container {display: flex;flex-direction: column;height: 100vh;background-color: #f5f5f5;
}/* 头部导航 */
.header {display: flex;align-items: center;justify-content: space-between;height: 88rpx;