弹性盒和多列布局

一、弹性盒模型
1、属性：display：flex；将盒子设置为弹性盒，一定要给父元素设置。（弹性盒的主轴默认为水平从左到右的排列）
2.flex-direction 设置主轴方向   （给父元素设置）
取值：（1）column 垂直排列
          （2)row(默认值)，在一行排列。
          （3）row-reverse 反向的水平排列
          （4）column-reverse  反向垂直排列
3.justify-content 主轴对齐方式 （给父元素设置）
取值：（1）center 居中对齐
          （2）flex-start 左对齐（默认值）
          （3）flex-end  右对齐
          （4）space-between 两端对齐
          （5）space-around  自动分配多余的空间给子项目两边
4.align-items 单行情况，侧轴对齐方式  （给父元素设置）
 取值： （1）flex-start 顶端对齐
           （2）flex-end 末端对齐
           （3）center 居中对齐
           （4）baseline 基线对齐      （行内元素、display：inline-block；都有基线对齐）
 5.flex-wrap 该属性控制flex容器是单行或者多行 （给父元素设置）
 取值：（1）wrap 换行
          （2）nowrap 不换行
          （3）wrap-reverse  反转换行
6.align-content  多行情况下，侧轴的对齐方式  （给父元素设置）
取值： （1）center 居中对齐
          （2）flex-start 上对齐（默认值）
          （3）flex-end  下对齐
          （4）space-between 两端对齐
          （5）space-around  自动分配多余的空间给子项目两边
7、align-self     子元素在侧轴方向的对齐方式   （给子元素设置）
取值：（1）auto；
         （2）flex-start
         （3）flex-end
           (4)stretch
           (5)center
8、order  （给子元素设置）
取值：(1)number 数字越大，排在最后面 默认值为0；
9.flex   （给子元素设置）
取值:(1)number    不能是flex：12px。这样写是错误的。
二、多列布局
1、column-count：value  分为几列
2、column-width： 最小宽度；
3、column-gap：20px ；列与列之间的间距。
4.column-rule：1px solid #ccc；设置列之间的
分割线的样式。
5.column-span：all（横跨所有列）/none。