码迷,mamicode.com
首页 > 微信 > 详细

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

时间:2020-07-18 11:25:45      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:设备   排列   item   像素   tar   写文本   ace   ems   显示   

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;

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

标签:设备   排列   item   像素   tar   写文本   ace   ems   显示   

原文地址:https://www.cnblogs.com/fyfandhmx/p/13334638.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!