盒模型（box-sizing属性）
盒模型尺寸基准有两种，分别是默认的content-box（标准盒模型）（默认）和border-box（怪异盒模型）
content-box: width/height = content（内容区）
border-box：width/height = content（内容区） + padding（内边距） + border（边框）
弹性布局（flex布局）
定义在父元素上
1、display:flex
设置为弹性盒（父元素添加）
2、flex-direction (主轴排列方向)
row: 横向排列（默认值）
column：纵向排列
（以下两个不常用：）
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column-reverse：反转纵向排列，从下往上排，最后一项排在最上面
3、justify-content(主轴对齐方式)
flex-start默认，顶端对齐
flex-end末端对齐
center居中对齐
space-between两端对齐，中间自动分配
space-around自动分配距离
4、align-items（侧轴对齐方式）
flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
5、flex-wrap(控制flex容器是否换行/列、根据主轴方向决定)
nowrap：默认值。不换行/列
wrap：换行/列
wrap-reverse：换行/列，但是以相反的顺序。
6、align-content（多根轴线的对齐方式）
stretch（默认）元素被拉伸以适应容器。
flex-start没有行间距
flex-end底对齐没有行间距
center居中没有行间距
space-between两端对齐，中间自动分配
space-around自动分配距离
7、flex-flow
flex-flow:row nowrap；（默认值，flex-direction flex-wrap简写形式）
定义在子元素上
1、align-self（允许单个项目有与其他项目不一样的对齐方式）
auto(默认) 表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
flex-start
flex-end
center
baseline
stretch
IE 和Safari 浏览器不支持 align-self 属性。
2、order（定义项目的排列顺序。数值越小，排列越靠前，默认为0）
3、flex-grow（定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。）
4、flex-shrink（定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小）
5、flex-basis（定义了在分配多余空间之前，项目占据的主轴空间，默认为auto）
6、flex（flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto）
auto (1 1 auto)
none (0 0 auto)
1(1 1 0%)
