首页 > 微信 > 详细

微信小程序flex布局

时间:2017-03-02 21:55:20      阅读:301      评论:0      收藏:0      [点我收藏+]
一、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布局

原文:http://www.cnblogs.com/baixuemin/p/6492553.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!