弹性布局

1：父元素称为容器，子元素称为项目。项目们排列的方向为主轴，与主轴垂直交叉的为交叉轴。
display:flex;//将块级元素变为容器。
display:inline-flex;//将行内元素变为容器。
元素设为弹性布局后，子元素会自动在一行内显示，但父元素高度不变；float,clear，vertical-align将失效；子元素如果是行内元素，则会成为块极；
2：flex-direction：
默认为row，即主轴为X轴，从左往右；row-reverse:主轴为X，从右往左；column:主轴为Y轴，从上往下；colume-reverse：Y轴，从下往上。
3：flex-wrap:当主轴排列不下项目时，是否换行，默认是nowrap，不换行，但是横方向缩小。wrap是换行。wrap-reverse：是换行且翻转。
4：flex-flow：flex-direction和flex-wrap的简写。
row nowrap（默认）；

5:justify-content：定义项目在主轴的排列方式。
flex-start:在主轴起点对齐。flex-end：在主轴重点对齐。center：在主轴中心对齐。space-between：两端对齐，元素间距相同。space- around：两端对齐，元素两端有空白距离。
6：align-items：项目在交叉轴的对齐方式，当主轴为水平时，项目在垂直反向的对齐方式
flex-start：交叉轴上起点对齐flex-end：交叉轴上终点对齐。center：居中。baseline：基线对齐。stretch：如果项目没高度，则占满高度。
7:align-content:当主轴有多个时，即item不止一行时。

---

项目属性：
order:值 默认为0，值越小越靠前排列。

flex-grow:值默认为0，父元素有多余空间子元素不放大。设置各子元素在父元素的比例。如果每个子元素的flex-grow都为1，则子元素在父元素主轴以同等比例占满父元素。
flex-shrink:空间不足时，item是否缩小。默认为1，自动缩小。其他整数表示缩小的比例。

align-self:某一个子元素的对齐方式：
flex-start ,flex-end,center,baseline,stretch,auto