css ：
view 相当于 div 块级元素
display 默认设置 block
display:inline 设置后 设置宽度高度是无效的
要设置宽度高度 又要设置为行内元素 我们设置：
(1)display:inline-block;
100px;
height:100px;
(2) flex 布局
display:flex
flex-direction:row;
flex-direction 设置布局方向 默认设置 row
row-reverse ： 主轴为 水平方向 起点在右边
column-reverse：主轴为垂直方向， 起点在下边
row（默认值）： 主轴为水平方向，起点在左端。
column： 主轴为垂直方向，起点在上沿。
reverse 意思是 倒序
（3） 为什么行倒序 于 列倒序有点不同
因为他们的高度是他们的本身的高度加起来的 宽度撑满屏幕
所以在列倒序上只是调整了下位置 行倒序就会向右倒序
原来排序是 1 2 3 反过来就是 3 2 1
（4）justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
flex-start 左边对齐
flex-end 右边对齐
center 中心
space-between 两端对齐，项目之间的间隔都相等
space-around 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
start 与 end 的方向 取决于主轴上的对齐方法 是哪个
space-between 让靠左边的元素靠左对齐 让右边的元素靠右对齐 其他的保持等距
space-between 也就是平均分布
space-around 等距分布 每个元素的左右距离都相等
（5） align-items属性
align-items属性定义项目在交叉轴上如何对齐。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
交叉轴的方向取决于主轴的方向
比如： 主轴 row 交叉轴 column 就比如一个十字路口
stretch 没有设置高度的情况下
（6） flex-wrap属性 换行
nowrap（默认）：不换行。
wrap：换行，第一行在上方
wrap：换行，第一行在上方。
换行： 有间距