学习旧岛小程序 （1） flex 布局

css ：

view 相当于 div 块级元素

display 默认设置 block

display:inline 设置后 设置宽度高度是无效的

要设置宽度高度 又要设置为行内元素 我们设置：

(1)display:inline-block;

width: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：换行，第一行在上方。

换行： 有间距