微信小程序flex布局

一、flex布局基础
二、相对定位和绝对定位
 
flex的容器和元素
微信小程序flex布局
 
主轴(左-右),交叉轴(上-下)
 
 
flex容器属性详解
flex-direction 决定元素的排列方向(默认row  column)
flex-wrap 决定元素如何换行(排列不下时) (nowrap不换行       wrap换行   wrap-reverse反转)
flex-flow  flex-direction 和flex-wrapde 的简写
justify-content 元素在主轴上的对其方式    (flex-start     flex-end   center    space-around   space-between)
align-items  元素在交叉轴的对其方式          ( flex-start  flex-end   center   stretch   baseline  )
 
flex元素属性详解
flex-grow 当有多余空间时,元素的放大比例  默认是1,等比缩小   0,保持不变,不被压缩      10 压缩10倍
flex-shrink 当空间不足时,元素的缩小比例
flex-basis 元素在主轴上占据的空间   250px   写rpx不解析
flex 是grow、shrink、basis的简写
order 定义元素的排列顺序  order: 4     2 3 1 
align-self 定义元素自身的对其方式   align-selft: flex-end;
 
 

微信小程序flex布局

上一篇:微信公众平台开发-access_token获取及应用(含源码)


下一篇:用户体验超棒的微信WebView进度条