flex是flexiblebox的縮寫，中文名字彈性盒子布局,在小程序布局中支持的很好
在試驗之前可以看一下張鑫旭的flex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/
1.給父容器設置了display:flex;則內部容器的塊狀特性會自動消失(再給內部元素設置display:block無效):
2.設置flex-direction:column則其子元素為垂直排列(高度會自適應) ,
如果不設置flex-direction，則默認會設置成row(橫向布局)
.
3.設置顛倒(所有元素對齊的方向也會改變，對於豎直排序的也一樣):
4.justify-content:start/end 設置了子元素的對齊方向
justify-content:center 設置子元素居中
justify-content:space-between :平均分布
justify-content:space-between :等距分布（1號元素與2號元素與3號元素左右的距離都相等）
垂直居中:
垂直水平居中:
5.主軸和交叉軸：
誰是主軸根據flex-direction來指定
row:水平方向是主軸
colmun:垂直方向的是主軸
justify-content指的是主軸上面的排列方式；
align-items指的是交叉軸上面的排列方式；
要下圖的布局方式是對垂直方向的子元素的對齊方向改變，所以只需要justify-content的樣式:
根據文字基線對齊
如果子元素的寬度大於父元素的寬度，又沒有設置換行，則會自動調整子元素寬度
設置換行（設置高度可以消除與上邊兩個的間距）
