想自动布局就用
display: flex;

子控件的:

1规定布局主方向，水平或者垂直： flex-direction

row ：从左至右
row-reverse ：从右至左
column：从上到下
column-reverse：从下到上

2主方向间隔处理：justify-content(uniapp里的主方向为column时该标签失效)

flex-start 集中在开头，中间不留间隙
flex-end 集中在末尾，中间不留间隙
center 居中对齐，中间不留间隙
space-between 两端对齐，空白均匀地填充到flex成员项之间。
space-around 元素两边平均等分剩余空白间隙部分，最左或最右和元素之间距离是1：2

3主方向自动换行: flex-wrap

对于app项目flex-direction: column时设置flex-wrap没用。
nowrap 默认值。规定始终不拆行或不拆列。
wrap 在必要的时候拆行或拆列。
wrap-reverse 规定在必要的时候拆行或拆列，但是以相反的顺序。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

4垂直方向间隔对齐，左中右：align-items(uniapp里的主方向为row时该标签失效)

如center。