css3属性

1、box-sizing
有三种属性值：border-box、content-box、inherit
设置宽度或者高度是否包含边框和内边距

2、flex
参考：https://segmentfault.com/a/1190000006741711
子类设置
flex-grow：设置弹性项目的放大比例，默认值为0
flex-shrink：设置弹性项目的收缩比例，默认值为1
flex-basis：设置弹性项目的宽度，默认值为auto

如果父级的空间足够：flex-grow有效，flex-shrink无效。
如果父级的空间不够：flex-shrink 有效，flex-grow无效。
flex的默认值：0 1 auto

align-self:auto | flex-start | flex-end | stretch |center

参考链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
父类设置

display:flex;

弹性项目是否换行

flex-wrap:wrap | norwrap | wrapreverse

设置弹性项目的流动情况

flex-direction:column | row | column-reverse | row-reverse

组合flex-direction+flex-wrap

flex-flow:0 1 auto;

设置弹性项目的分布情况

justify-content:flex-start | flex-end | center | space-between | space-around;

属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用

align-content:flex-start | flex-end | center | space-between | space-around;

设置弹性项目

align-items:flex-start | flex-end | center | baseline | stretch