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

目录

一、尺寸单位 ：rxp

二、flex布局

1、display：flex；

2、flex-direction 属性

3、flex-wrap属性

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、微信小程序真机不支持相对路径