WXApp入门篇 : flex 布局

flex布局

容器属性	作用	参数
flex-direction	决定元素排列方向	row / row-reverse / column / column-reverse
flex-wrap	决定元素如何换行	nowrap / wrap / wrap-reverse
flex-flow	flex-direction和flex-wrap的简写	<flex-direction> // <flex-wrap>
*************	******	******
justify-content	元素在主轴上的对齐方式	flex-start / flex-end / center / space-between / space-around
align-items	元素在侧轴上的对齐方式	flex-start / flex-end / center / baseline / stretch
align-content	多根轴线的对齐方式	flex-start / flex-end / center / baseline / stretch

flex元素属性	作用	参数
flex-grow	当有多余的控件时，元素的放大比例	<integer>
flex-shrink	当控件不足时，元素的缩小比例	<number>
flex-basic	元素在主轴上占据的空间	<length> / auto
flex	grow/shrink/basic 的简写	none 或[ <'flex-grow'> <'flex-shrink'><'flex-basis'> ,该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
*************	******	******
order	定义元素的排列顺序（越大，越上层）	<integer>
align-self	定义元素自身的对齐方式	auto / flex-start / flex-end / center / baseline / stretch
*************	******	******

相对定位和绝对定位

相对定位的元素是相对自身进行定位，参照物是自己
绝对定位的元素使相对离他最近的一个已定位的父级元素进行定位