flex盒子六大属性
- Flex英文翻译为: Flexable Box的缩写。旨在为盒状模型提供最大的灵活性。
任何容器都可以指定为Flex布局
2. 作用在box容器的六大CSS属性（为了控制子元素的显示方式）
flex-direction ————决定flex-items的整体排布方向（横排，竖排，竖排反响，横排反向）
flex-wrap——————决定flex-items行排满后，是否换行以及怎样换行
justify-content————flex-items整体在flex-direction指定方向进行调整
align-content—————同justify-content一样，作用方向相反(不常用)
align-items——————对flex-item的flex-direction指定方向的垂直方向 进行上下或居中
注释：区分align-content align-items
align-content:center对单行是没有效果的,而align-items:center不管是对单行还是多行都有效果
2.1 flex-direction ————决定flex-items的整体排布方向（横排，竖排，竖排反响，横排反向）
row ： flex-items整体横向排布
row-reverse ：flex-items整体横向排布，但items反转，如“123”横向排布变为“321”
column ： flex-items整体竖向排布
column-reverse ： flex-items整体竖向排布，但items反转
2.2 flex-wrap—————决定flex-items行排满后，是否换行以及怎样换行
no-wrap : 不换行（一行满了也不换）
wrap ： 换行（一行满了换到下一行）
wrap-reverse ： 换行反转，也就是第一行满了后。第一行与第二行位置反转。
2.3 flex-flow是flex-direction与flex-wrap结合体
flex-flow: row; no-wrap;
2.4 justify-content 为flex-direction指定方向进行调整
flex-start——flex-end——center——space-between——space-around
2.5 align-content 同justify-content一样，作用方向相反
2.6 align-items 对flex-item的flex-direction指定方向的垂直方向 进行上下或居中
flex-start——flex-end——center