flex:多栏多列弹性布局

可设置的属性有：align-items、flex-direction、align-content、justify-content、flex-wrap、flex、align-self、flex-grow、flex-shrink、flex-basis
前提：父元素设置了display：flex;
align-items：在父元素内设置，用于确定子元素在父元素内在纵轴的排列，前提是父元素没有设置换行，可用值：center（垂直居中），flex-start（开头），flex-end（底部），baseline（基于基线）
flex-direction：父元素内设置，设置子元素的排列方向，可用值：row（一行显示），row-reverse（一行内逆序显示），column（一列显示），column-reverse（一列逆序显示）
align-content：在父元素内设置，用于确定子元素之间在纵轴上的排列，前提是子元素的宽度之和比父元素的宽度要大，且父元素要设置换行（flex-wrap：wrap），
           可用值：center（子元素垂直居于父元素的中部），stretch（拉升子元素到充满父元素，前提子元素没有设置高度），flex-start（顶部），flex-end（底部）
           space-between（子元素之间留有空隙），space-around（子元素的上下左右都留有空隙）。
justify-content：在父元素内设置，确定子元素在父元素水平方向上的位置，可用值：center(水平居中，没有间隙)，flex-start（默认，位于头部没有间隙），flex-end（容器尾部），space-between（子元素之间留有间隙），space-around（子元素周围留有间隙）
flex-wrap：父元素内设置，确定在子元素宽度之和大于父元素时是否换行显示，可用值：nowrap（不换行，可能导致溢出），warp（超出时换行显示），wrap-reverse（超出时反转顺序显示）
flex:子元素内设置，确定子元素在父元素中所占比例，可用值：auto/1（根据内容自动平均分配），其他数字（基准值的几分之几，2即为2分之一以此类推）
align-self：在子元素内设置，首先他会覆盖掉父元素赋予子元素的align-items属性，单独给自己设置在父元素内的显示位置，可用值：同align-items
flex-grow：子元素内设置，相对于基准值扩大一定比例，可用值：数字
flex-shink：子元素内设置，相对于基准值缩小一定比例，可用值：数字
flex-basis：子元素内设置，设置基准值，可用值：像素