小程序开发全栈1.2/3/4组件flex布局样式

Posted 2020-12-17 fyfandhmx

1.2 组件

1.2.1 text组件

编写文本信息，类似于HTTP中的span

1.2.2 view组件

容器，类似于HTTP中的div

1.2.3 image组件

图片显示组件

1.3 页面flex布局

一种非常方便的通用布局方式

1.3.1 flex-direction

规定主轴方向

• column：主轴竖直

• row：主轴水平

1.3.2 justify-content

规定主轴方向上的排列方式

• flex-start/end

• center

• space-around

• space-between

1.3.3 align-items

规定副轴方向排列方式

• flex-start/end
• center
• space-around
• space-between

1.3.4 示例：

display:flex;					flex布局
flex-direction:row;				规定主轴方向：row/column
justify-content:space-around;	元素在主轴方向上的排列方式：flex-start/end/space-around/space-between
align-items:center;				元素在副轴方向上的排列方式

1.4 样式

1.4.1 像素

• px：像素点
• rpx：像素，针对不同的设备自动适配，保证小程序前端兼容性
  • 规定设备的最大宽度为750rpx；