小程序布局技巧

弹性盒子：

display：flex

弹性盒子属性flex-direction

flex-direction：
column - 列排列
row - 行排列
reverse - 倒序
column-reverse - 列倒序
row-reverse - 行倒序

弹性盒子属性justify-content

flex-start 对齐方式 和reverse属性作用相反，可以同时使用
flex-end 对齐方式
center 居中
space-between 平均分布
space-around 等距分布

主轴和交叉轴

flex的另一个重要概念-轴
justify-content和align-item的属性基本一致
区别：分别对应主轴和交叉轴
但是又不完全对应，谁是主轴取决于flex-decoration属性。

• 垂直水平居中
  display：flex；
  flex-decoration：column；
  justify-content：center；
  align-item：center；
• 垂直居中
  display：flex；
  flex-decoration：column；
  justify-content：center；
• 水平居中
  display：flex；
  flex-decoration：row；
  justify-content：center；

baseline与stretch

align-item：stretch；
让所有子元素高度被拉伸，前提是子元素没有设置高度。
aligh-item: baseline;
保证每个元素里面的文字底线对齐。

flex-wrap消除间距

flex-wrap：nowarp；// 默认不换行，平均分配。
flex-wrap：wrap； //换行，且换行后，第二行高度居中，也就是产生间距
解决flex-wrap间距办法：

1. 缩小父元素高度