弹性布局

Flex布局基本概念

采用Flex布局的元素（display:flex;），被称为 flex container，而它的子元素就称为 flex item（注意是子元素，其余后代元素不是 flex item，如flex item的子元素）

容器默认存在两根轴，水平的主轴（main axis）和垂直的交叉轴（cross axis），主轴开始的地方是 main start,结束的地方是main end,交叉轴开始的地方是 cross start,结束的地方是 cross end,主轴空间叫做 main size,交叉轴空间叫做 cross size。

Flex container 属性

flex-direction设置主轴方向

flex-direction取值

row:主轴方向从右到左（默认）
column:主轴方向从上到下
row-revers:主轴方向从左到右
column-revers:主轴方向从下到上

justify-content设置主轴上的内容分布<