这是在学习小程序的时候，建议使用flex布局，所以就学习了flex布局，尽管之前也听说了flex布局的好处，在分析css框架的时候也经常看见过，但是却从未真正使用过。。。我是参考了CSDN里的博客写的，地址如下
所有的flex布局必须把父元素的display设置成flex,才能够使用flex布局
display:flex;父元素下的子元素都可以称为一个item，接下来就是控制item们的方向了
flex-direction:row||column||row-reverse||column-reverse- row 属性 就是在一行排布
- column 属性 就是在列排布
- row-reverse 属性 就是和row反着干
- column-reverse 属性 就是和 column反着干
有时候内容过多我们需要换行，就像textarea一样，文字过多就会自动换行
flex-wrap:nowrap||wrap||wrap-reverse;-
nowarp 属性 很好理解，就是不换行了
-
wrap 属性 也很好理解，就是正常的换行
- wrap-reverse 属性 特殊点是换行的时候第一行会跑到下面
有个属性综合上述两个属性，类似background类型的属性啦
flex-flow：<flex-direction>||<flex-wrap> 默认值是 row 和 nowrap水平方向的item们的对齐方式
justify-content:flex-start || flex-end || center || space-between || space-around- flex-start 就是右对齐
- flex-end 从右开始到左结束，所以是左对齐啦
- center 居中对齐
- space-between 两端对齐，item直接的间隔是相等,这个有点类似 兄弟选择器 ‘+’ 设置的水平外边距
- space-around 每个item两侧的间隔相等。需要注意的是，这里强调的是每个item有固定的外边距，所以边框的外边距是item之间的一半。
定义在竖直方向的位置，我个认为这是最最迷人的属性了
align-items:flex-start || flex-end || center || baseline || stretch- flex-start item在父元素的顶部 注意是从上到下的
- flex-end item在父元素的底部 注意是从上到下的
- center 让你和position定位说再见的属性，让你轻松垂直居中的属性了
- baseline item的第一行文字的基线对齐。
定义多行的垂直对齐方式，注意只有一行的时候，是不起作用的，这时候就使用 justify-content 或者align-items
align-content:flex-start || flex-end || center || space-between || space-around || stretch- flex-start 属性 column是向顶部靠拢的，和align-items的flex-start 是一样的
- flex-end 属性 column 是向底部靠拢的，和align-items的flex-end 是一样的
- center 属性 column 向中部靠拢，和align-items的center 是一样的
- space-between 属性 column的垂直方向的行距是相等的，两端和父元素对齐，和justify-content的space-between 类似
- space-around 属性 column 的垂直方向的两边的行距是相等的，不会重叠，也就是行与行的边距是第一行到父元素的边距的两倍。
- stretch 属性 column 布满整个父元素