uniapp布局样式
uniapp布局样式基础
uniapp基于Vue.js框架，支持Flex布局和传统CSS布局方式。Flex布局是推荐的主要布局方式，因其灵活性和响应式特性。
- 使用
display: flex开启Flex布局 - 通过
flex-direction控制主轴方向（row/column） - 使用
justify-content管理主轴对齐方式 - 通过
align-items控制交叉轴对齐方式
常用布局组件
uniapp提供了专用组件简化布局开发：
view组件
基础容器组件，默认使用Flex布局，可通过CSS自定义样式：
<view class="container">
<view class="item">1</view>
<view class="item">2</view>
</view>scroll-view组件
可滚动视图区域，适合长列表布局：
<scroll-view scroll-y style="height: 300px;">
<view v-for="i in 50" :key="i">Item {{i}}</view>
</scroll-view>响应式布局实现
uniapp支持通过rpx单位实现响应式布局：
- 1rpx等于屏幕宽度的1/750
- 设计稿通常以750px宽度为标准
- 换算公式：设计稿元素尺寸 * 2 = rpx值
示例代码：
.container {
width: 750rpx; /* 满屏宽度 */
padding: 20rpx;
}
.item {
width: 345rpx; /* (750-20*2)/2 */
margin: 10rpx;
}复杂布局技巧
多列等分布局
使用Flex的flex属性实现等分：
.row {
display: flex;
}
.column {
flex: 1;
margin: 10rpx;
}固定底部布局
结合定位实现底部固定元素：
.page {
position: relative;
min-height: 100vh;
}
.footer {
position: fixed;
bottom: 0;
width: 100%;
}样式作用域处理
uniapp支持通过scoped属性限定样式作用域：
<style scoped>
/* 仅作用于当前组件 */
.container {
background: #f5f5f5;
}
</style>全局样式可定义在App.vue或单独CSS文件中，通过@import引入。
