弹性盒模型

盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间，通过display来改变元素遵循什么样的盒模型。
常见的盒模型：标准盒模型、怪异盒模型、这周又了解到了弹性盒模型。
总所周知，基本每个元素都有margin、border、padding、content四个属性。
标准盒模型所占平面空间大小：width/height（content）+border+padding+margin；
怪异盒模型所占平面空间大小：width/height（content+border+padding）+margin；
弹性盒模型与两者稍有不同：它容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end，请看下图:

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

弹性盒里的项目（元素）默认沿主轴排列显示，当然轴的方向可改（见下文），并且子元素会在一行上自动进行收缩处理，若子元素未定义高度，则默认为父元素的100%，它有自己的显示位置；并且有自己的默认对齐方式（align-items）。
下列是添加给弹性盒（即父元素）的属性，详细：
1、display：flex/inline-flex；flex为块级弹性盒，独占一行;inline-flex为行内块级弹性盒，元素排列在一行;设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
弹性盒只针对第一级子元素生效。
2、flex-direction属性，它决定主轴的方向（即项目的排列方向）。
默认情况下：主轴的方向从左向右的；row：在左向右的方向（默认值），row-reverse：翻转主轴水平方向的位置： 自右向左，column：自上而下的方向 (比较常用的)，column-reverse：翻转垂直方向的位置：自下而上的方向。
3、flex-wrap属性，定义子元素是否换行显示，nowrap：不换行 (默认值)，wrap：换行（常用），wrap-reverse：翻转wrap显示。
flex-direction属性和flex-wrap属性可简写，复合式写法，flex-flow属性默认值为row nowrap。
4、 justify-content属性 定义了项目在主轴（）上的对齐方式。
flex-start ：(默认值) 沿着主轴的起始点对齐的，flex-end：沿着主轴的终点对齐的，center ： 沿着主轴的居中位置对齐的，space-between ： 两端对齐，中间自由分配，space-around ：在元素左右自动分配距离，space-evenly; 设置元素之间的空隙相等。
5、align-items属性定义侧轴方向是如何对齐。
flex-start：沿着侧轴的起始点对齐的。
flex-end：沿着侧轴的终点对齐的。
center：沿着侧轴的中间位置对齐的（相对比较常用）。
baseline：沿着侧轴的基线对齐的。
stretch（默认值）：拉伸至同父元素一样高。
6、align-content属性定义了多根轴线的对齐方式，对于单行子元素，该属性不起作用。
flex-start：没有行间距。
flex-end：底对齐没有行间距。
center：居中没有行间距。
space-between：两端对齐，中间自动分配。
space-around：自动分配距离。
space-evenly：设置元素之间的空隙相等。
stretch：默认值。
项目被拉伸以适应容器。当子元素设置了高度后，在默认位置显示。