关于flex布局和九宫格布局的实现

1.父容器常见属性

display：flex

(项目在主轴上的排列方式)

justify-content：flex-start / flex-end / center / space-around / space-between

（项目在交叉轴上的排列方式）

align-items: flex-start / flex-end / center /  baseline /。。。

（flex-direction）设置主轴

flex-direction：row / row-reverse / column / column-reverse 

 

flex-wrap项目是否换行排列

flex-wrap：wrap / no-wrap

2.设在项目上的属性

flex复合属性  ： flex-grow  flex-shrink  flex-basis

（

  flex-grow  如果父容器有剩余空间，则当前项目可以分到剩余空间的几份

  flex-shrink 如果父容器空间不够，则当前项目需要拿出几份空间

  flex-basis 默认值auto  意思是根据子项自身尺寸渲染  也可以像width一样设置子项的宽度

        在Flex布局中，flex-basis优先级是比width高的（可以理解为覆盖）

）

order定义项目的排列顺序，越小越靠前，默认为0

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性

3.九宫格布局的实现