微信小程序flex布局基础

今天学习了flex布局基础
1.flex容器和元素
下面这是一张flex容器的布局图，有助于大家理解：
图中的黄色小方框item1和item2 就是flex元素
2.flex容器属性
flex-direction决定了元素的方向
flex-wrap决定元素如何换行（排列不下时）
flex-flow是flex-direction和flex-wrap的简写
justify-content元素在主轴上的对其方式
align-iems元素在交叉轴的对齐方式
flex-grow当有多余空间时，元素的放大比例
flex-shrink当空间不足时，元素的缩小比例
flex-basis元素在主轴上占据的空间
flex是grow、shrink、basis的简写
align-self定义元素自身的对齐方式
举例：
首先我们选择一个页面设置一个简单的布局

这是默认下的排列方式，我们再使用flex布局
（1）flex-direction

我们可以通过改变它的属性，来改变它的排列方向。
（2）flex-wrap
我们先增加页面的元素，再来试试flex-wrap如何换行

代码如下：编译后，我们发现排列不下的元素，排到了第二行

还有一种是 wrap-reverse,这种排列方式其实是上一种的反转
（3） justify-content
center属性
flex-start
(4)align-items
属性是flex-end时

3.相对定位和绝对定位
相对定位的元素是相对自身进行定位，参照物是自己。
绝对定位的元素是相对离它最近的一个已定位的父级元素进行定位。
今天就学习了这些。