微信小程序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;