Flex语法和常用鼠标手势

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帮助