标签：使用 空间 dir 换行 填充 flow 控制 中间 水平
多列布局：
设置列数：column-count：4 || 2.......
添加列间隙样式，与边框样式border添加一样 column-rule：dashed 3px red
设置列间隙大小 column-gap ：50px
设置列宽：原则：取大有限 如果人为设置自宽度更大，则取更大的值，但是会填充整个屏幕，以为最终的宽度可能也会大于设置的宽度 ；；； 如果人为设置的宽度更小，使用默认计算的宽度 column-width：200px
设置跨列显示 column-span：all
伸缩布局：
设置父容器为伸缩盒子：会使每一个子元素自动成伸缩项：display：flex
设置子元素的排列方式 ：flex-start：让子元素从父容器的起始位置开始排列 flex-end 让子元素从父容器的结束为止开始排列 center 让子元素从父容器的中间为止开始排列 space-between 左右对齐父容器的开始和结束，中间平均分，产生相同的间距 space-around 将多余的空间平均的分页在每一个子元素的两边 造成中间盒子的间距是左右两边盒子间距的两倍
justify-content：flex-start || flex-end || center || space-between || space-around
flex-wrap：控制子元素是否换行显示，默认是不换行 flex-wrap：nowrap 不换行（会收缩）|| wrap（换行）
flex-direction：设置子元素的排列方向，就是用来主轴方向，默认主轴方向是row(水平方向)
flex-direction：row （水平排列方向，从左到右） || row-reverse(水平排列方向，从右到左) || column（垂直排列方向，从上到下） || column-reverse（垂直排列方向，从下到上）
align-items：设置子元素（伸缩项）在侧轴方向上的对齐方式 center || flex-start|| flex-end||
子元素内设置的：：： flow-grow：可以来扩展子元素的宽度 设置当前元素应该占据剩余空间的比例值 flex-gorw默认是0
比例值计算算：当前空间的flex-grow/所有兄弟元素的flex-grow的 和
flex-shrink：定义收缩比例，通过设置的值来计算收缩空间 默认值是1 比例值计算：当前空间的flex-shrink/所有兄弟元素的flex-shrink的和
flex是用来设置当前伸缩子项占据剩余空间的比例值 flex：1
align-self：flex-end|| flex-start||center
多列布局----伸缩布局-----
标签：使用 空间 dir 换行 填充 flow 控制 中间 水平
原文地址：http://www.cnblogs.com/huile/p/7087154.html
