box-sizing:
border-box：width是整体的大小
content-box：width是内容区大小
flex box弹性布局
弹性布局子元素通常在同一行内显示。
flex-direction：布局内子元素的排列方式
row：默认从左到右
row-reverse：从右到左
column：从上到下
column-reverse：从下到上
justify-content属性
内容对齐：把弹性元素沿着弹性容器的主轴线对齐。
fiex-start-默认值-左对齐
flex-end-右对齐
center：居中
space-between：左右对齐
space-around：均分
align-items
flex-start：
flex-wrap：指定弹性盒子的子元素换行方式
nowrap：默认，弹性容器为单行，该情况下弹性子项可能会溢出容器
wrap：多行，溢出的部分会放置到新行
wrap-reverse：反转
initial
inherit
flex：指定子元素如何分配空间