uni-app尺寸单位、flex布局于背景图片

目录

[一、尺寸单位 :rxp](#一、尺寸单位 :rxp)

二、flex布局

1、display:flex;

[2、flex-direction 属性](#2、flex-direction 属性)

3、flex-wrap属性

[4、justify-content 属性定义了项目再主轴上的对齐方式](#4、justify-content 属性定义了项目再主轴上的对齐方式)

5、align-items属性定义项目再交叉轴上如何对齐

6、flex-grow

三、背景图片


一、尺寸单位 :rxp

计算公式:750 x 元素再设计稿中的宽度/设计稿基准宽度

例如:设计稿宽度为640px,元素A在设计稿上的宽度为100,那么元系A在宽度应该750×100,约为117rpx

二、flex布局

1、display:flex;

指定为 flex 布局

2、flex-direction 属性

①row(默认值):主轴为水平方向。起点在左端

②row-reverse:主轴水平方向,起点在右端

③column:主轴为垂直方向,起点在上沿

④column-reverse:主轴为垂直方向,起点在下沿

3、flex-wrap属性

①nowrap(默认):不换行

②wrap:换行,第一行在上方

③wrap-reverse:换行,第一行在下方

4、justify-content 属性定义了项目再主轴上的对齐方式

①flex-start(默认值):左对齐

②flex-end:右对齐

③center:居中

④space-between:两端对齐,项目之间的间隔都相等

⑤space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍

5、align-items属性定义项目再交叉轴上如何对齐

①flex-start:交叉轴的起点对齐

②flex-end:交叉轴的终点对齐

③center:交叉轴的中点对齐

④baseline:项目的第一行文字的基线对齐

⑤stretch(默认值):如果项目未设置高度或设为 auto ,将占满整个容器的高度

6、flex-grow

①flex-grow 属性定义项目的放大比例,默认为0 ,即如果存在剩余空间,也不放大

②如果所有项目的 flex-grow 属性都为1,则它们将等分剩余空间(如果有的话)

③如果一个项目的 flex-grow 属性为2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍

三、背景图片

1、不能大于 40kb,大于使用 base64 格式或使用网络地址

2、本地背景图片的引用路径推荐使用 ~@

3、微信小程序真机不支持相对路径

相关推荐
慎思笃行_3 小时前
uniapp 无线连接 手机基座
智能手机·uni-app
00后程序员张3 小时前
App 上架全流程指南,iOS 应用发布步骤、ipa 文件上传工具、TestFlight 分发与 App Store 审核经验分享
android·ios·小程序·https·uni-app·iphone·webview
2501_916013743 小时前
iOS App 上架流程详解,苹果应用发布步骤、App Store 审核规则、ipa 文件上传与测试分发实战经验
android·ios·小程序·https·uni-app·iphone·webview
小样还想跑3 小时前
UniApp ConnectSocket连接websocket
websocket·elasticsearch·uni-app
Nan_Shu_6144 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
—Qeyser4 小时前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
游戏开发爱好者84 小时前
Nginx HTTPS 深入实战 配置、性能与排查全流程(Nginx https
运维·nginx·ios·小程序·https·uni-app·iphone
游戏开发爱好者86 小时前
TCP 抓包分析:tcp抓包工具、 iOS/HTTPS 流量解析全流程
网络协议·tcp/ip·ios·小程序·https·uni-app·iphone
辛宝Otto_WebWorker6 小时前
自力更生!uniapp 使用鸿蒙 UTS 使用三方依赖、本地依赖
uni-app·harmonyos
Q_Q5110082857 小时前
python+uniapp基于微信小程序美食点餐系统
spring boot·python·微信小程序·django·flask·uni-app·node.js