css盒子模型及弹性布局

盒子模型
分为标准盒子模型和IE盒子模型
标准盒子模型
box-sizing: content-box
宽度：width+边界+内边距
IE盒子模型
box-sizing: border-box
宽度：width包含边界和内边距

flex布局也叫弹性布局，能够自动伸缩盒模型达到自适应的效果。
弹性布局由弹性容器（flex container）和弹性项目（flex item）组成。
在弹性容器中，水平方向称为主轴（main axis），垂直方向称为纵轴（cross axis）。
在弹性项目中分为元素的宽度（main size）和元素的高度（cross size）。

弹性容器的几个属性：
flex-direction：row|row-reverse|column|column-reverse
控制元素的排列方式；
row：从左往右；
row-reverse：从右往左；
column：从上往下；
column-reverse：从下往上。

flex-wrap：no-wrap|wrap|wrap-reverse
控制元素的换行方式
no-wrap：不换行；
wrap：正常换行；
wrap-reverse：元素从下往上换行。

flex-flow：flex-direction和flex-flow的合并属性；
justify-content:控制元素在主轴上的排列方式；
align-content:控制元素在纵轴上的排列方式；

弹性项目的几个属性：
order：弹性项目的排列序号，数值越小越靠前；
flex-grow：弹性项目在空余空间的放大比例；
flex-shrink：弹性项目在空余空间的缩小比例；
flex-basis：弹性项目的基本长度。
flex：flex-grow，flex-shrink，flex-basis的合并属性。
默认: 0,1,auto。