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