Flex 布局

1. flex 是什么？

2. 为什么我们需要 flex?

(1):flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思

解决元素居中问题

(2):自动弹性伸缩，合适适配不同大小的屏幕，和移动端

一、容器container的属性

（1）外围大容器的属性设置

1. flex-direction   主轴方向
2. flex-wrap        主轴一行满了换行
3. flex-flow        1和2的组合
4. justify-content  主轴元素对齐方式
5. align-items      交叉轴元素对齐方式//单行
6. align-content    交叉轴行对齐方式//多行

flex—direction 的主轴方向

主轴为水平轴，起点在最左端

主轴为水平轴，起点在最右端

主轴为垂直方向，起点在上沿

主轴为垂直方向，起点在下沿

4.justify-content 主轴元素对齐方式

这里是元素的对齐，区别于刚刚的「方向」

flex-start (默认)靠左对齐/

flex-end   靠右对齐

center     靠主轴居中对齐

space-between 两端对齐，靠容器壁，剩余空间平分

space-around  分散对齐，不靠容器壁，剩余空间在每个项目二侧平均分配

space-evenly  平均对齐，不靠容器壁，剩余空间平分

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。