flex弹性布局

---

一、flex弹性布局

1.flex弹性概念

弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
一维布局就是一行或者一列的布局；二维布局比如：grid网格布局；

2.主轴与交叉轴

弹性布局需要先用一个容器包裹起来，flex container就是flex容器，flex item子项。子项时默认水平排列的。
水平的就是主轴(main axis），主轴的起始位置叫做main start，main end就是主轴的结束位置，主轴默认情况是水平的，并且从左到右水平排列的。
垂直的就是交叉轴(cross axis)，交叉轴起始位置叫做cross start，cross end就是结束位置，交叉轴是垂直的，并且从上到下的顺序。

3.flex容器

flex容器里面的属性不要添加到子项属性当中，都有各自相同的属性。

3.1 flex-direction 改变轴方向