CSS盒子模型

怪异盒模型(IE盒模型)

设置：box-sizing:border-box;

特点：width(height) = width(height) + padding + border

弹性盒模型

设置：display:flex;

特点：用于响应式布局

flex-direction:row/row-reverse/column/column-reverse; //元素排列方向
flex-wrap:wrap/wrap-reverse; //换行设置 默认不换行只收缩宽度
flex-flow:derection wrap; //上面两个合并写法

justify-content:flex-start/flex-end/center/space-between/space-around/space-evenly;	//主轴对齐方式
align-items:flex-end/center/stretch;	//交叉轴对齐方式，适用于单行
align-content: 和主轴一样;	//交叉轴对齐方式，适用于多行
align-self:和align-items一样;	//设置单个子元素的交叉轴对齐方式
flex-grow:1(平均分配)/0(不分配)/n(n等分);	//剩余空间分配
flex-shrink: 0(不缩小);	//缩小比例

参考：flex弹性盒模型及flex-grow与flex-shrink的计算