微信小程序（五）

flex布局

弹性布局。display:flex表示使用flex布局，主要有下面几个属性flex-direction，flex-wrap，justify-content。
在flex容器中的元素，会按order进行排序展示，值越小越先展示，flex是占比，设置了flex则元素的width就相当于失效了。元素宽度等于flex占屏幕宽度的比例。

这几个属性会相互作用，比如指定了逆向，再指定order。

wxml中
<view class="container">
   <view class='a size'>a</view>
   <view class='b size'>b</view>

   <view class='c size'>c</view>

   <view class='d size'>d</view>

   <view class='e size'>e</view>

</view>


wxss中
.container{
  display: flex;
  /* flex-direction: 摆放方向 */
  /*row为横 正向 默认*/
  /*row-reverse为横 逆向*/
  /*column 列正向*/
  /*column-reverse 列逆向*/
  /* flex-direction: row; */

  /* flex-wrap: 是否换行 */
  /*默认不换行，wrap当元素在同一行挤不下去自动换到下一行，wrap-reverse逆向换行*/
  /* flex-wrap: wrap-reverse; */
 
  /* justify-content:对齐方式 */

  /* flex-start:左对齐*/
  /* flex-end:右对齐*/
  /* center:中间对齐*/
  /* space-around:环绕对齐，每个元素周围都有间隔*/
  /* space-between:只在两个元素之间有间隔*/

  /* justify-content: space-between; */
}
.size{
  height: 150rpx;
  width: 150rpx;
}

.a{
  background-color: red;
  order: 1;
  /*占2/7宽*/
  flex: 2;
}

.b{
  background-color: yellow;
  order: 11;
   flex: 1;
}

.c{
  background-color: blue;
  order: 10;
   flex: 2;
}

.d{
  background-color: blueviolet;
  order: 3;
   flex: 1;
}

.e{
  background-color: orange;
  order: 2;
   flex: 1;
}