Flex弹性和模型
1、display : flex/inline-flex ;(设置给氟元素）
flex : 将对象作为弹性伸缩盒显示；
inline-flex : 将对象作为内联块级弹性伸缩显示；
2、flex-direction （主轴排列方向）说明：顺序指定子元素在父容器的位置；
row : 默认横向排列；
row-reverse : 反转横向排列；
column : 纵向排列；
column-reverse : 反转纵向排列；
3、justify-content （主轴对齐方式） 说明：内容对齐，属性应用在单行容器上，把弹性项沿着弹性容器的主轴线对齐；
flex-start : 默认 顶端对齐；
flex-end : 末端对齐；
center : 具中对齐；
space-between : 两端对齐，中间自动分配；
space-around : 自动分配距离；
4、flex-warp 说明：该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向；
nowrap : flex 容器为单行，子元素可能会溢出容器；
wrap ： flex 容器多行，子元素溢出部分会被换行，子项内部发生断行；
wrap-reverse ：反转wrap 排列；
5、align-items (侧轴对齐方式）
flex-start : 从侧轴（纵轴）起始边缘排列；
flex-end : 相反方向；
center : 元素侧轴居中（如果改行小于盒子元素，则向两方向溢出相同长度；
baseline : 与flex-start 一样，其他情况该值将于基线对齐；
strech : 默认值。项目被拉伸以适应容器；
6、align-content (行与行之间对齐方式）
flex-start ： 没有行间距；
flex-end ：底对齐没有行距；
center : 居中没有行距；
space-between ： 两端对齐，中间自动分配；
space-around : 自动分配距离；
7、align-self (给子元素加） 注意：属性可重写灵活容器的align-items属性；
auto ：默认值；继承父元素align-items属性；如果没有则为 stretch;
strtch ： 元素拉伸以适应起容器；
center ： 元素位于容器的中心；
flex-start : 元素位于容器的开头；
flex-end : 元素位于容器的结尾；
8、flex三个属性值
flex-grow : 定义项目放大比例，默认0 ，既存在剩余空间也不放大；
flex-shrink：定义项目缩小比列，默认1，即空间不足则会同比列缩小，负值无效；
flex-basis ： 项目长度；
常用的鼠标指针手势：
cursor : crosshair 十字架、pointer 手型、move 移动、e-resize左右方向、ne-resize向右及向上移动、nw-resize向上及向左移动、n-resize向上、se-resize向下及右、se-resize向下及左、s-resize向下、w-resize向左、text文本、wait等待、help帮助