微信小程序CSS布局—display:flex

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex的六种属性

flex-direction

容器内元素的排列方向(默认横向排列)

1. flex-direction:row 沿水平主轴让元素从左向右排列
   

2. flex-direction:column 让元素沿垂直主轴从上到下垂直排列
   

3. flex-direction:row-reverse 沿水平主轴让元素从右向左排列
   
   
   

flex-wrap

容器内元素的换行(默认不换行)

1. flex-wrap: nowrap
   (默认)元素不换行,比如：一个div宽度100%，设置此属性，2个div宽度就自动变成各50
2. flex-wrap: wrap 元素换行
   
   

justify-content

用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式

1. flex-start 默认值，项目位于容器的开头
2. flex-end 项目位于容器的结尾
3. center 项目位于容器的中心
4. space-between
   项目位于各行之间留有空白的容器内。即元素在主轴（页面）上左右两端或者上下两端开始排列
5. space-around
   项目位于各行之前、之间、之后都留有空白的容器内，每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍

align-items

元素在主轴（页面）当前行的横轴（纵轴）方向上的对齐方式
属性可以应用于所有的flex容器，它的作用是设置flex子项在每个flex行的交叉轴上的默认对齐方式。

1. align-items : flex-start
   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界（靠上对齐）
   

2. align-items : flex-end
   弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。（靠下对齐）

3.align-items : center
弹性盒子元素在该行的侧轴（纵轴）上居中放置。（居中对齐）

4.align-items : baseline
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。（靠上对齐）

align-content

在弹性容器内的元素没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）
“align-content 只适用多行的flex容器（也就是flex容器中的子项不止一行时该属性才有效果）”
属性相同，参考align-item

flex常见属性总结

比如我需要让view标签（class=“text”）内的两个子view上下对齐

.text{flex:8;padding: 30rpx;
      display: flex;flex-direction: column;justify-content: space-between;}

在这里，这三个属性都要在。缺少了实现不了效果！