.icon{显示：行内块；.middle{垂直对齐：中间；}displayinline/inline-block/block-->>milk/jelly/nutsinline:img,span,strong,em,i,em,a...inline-block:input,button,...(table-cellelement)block:p,div,...(只要元素应用了float，position就会变成块元素)tableflextabletable-row(tr)table-cell(td)table-row-group(tbody)table-header-group(thead)table-footer-group(tfooter)table-caption(caption)table-column(col)table-column-group(colgroup)显示：在表格单元格下，垂直居中，等高特征表表中同一行的列表元素都是等高的。display:table-cell属性元素对margin不敏感，即margin对其不起作用。最适用的场景是列表的数量不固定，但是不管列表有多少，容器空间都会平分。parent设置display:table，width为容器宽度，或者直接width:100%。这时候会显示：table-cellsub-elementis自动划分。flexflex方向|flex-wrap(flexcontainer).container{显示:flex|内联柔性；}.container{flex-direction:行|行反转|栏目|列反转；}.container{flex-wrap:nowrap|包装|换行；}.container{flex-flow:<'flex-direction'>|<'flex-wrap'>}调整内容|对齐项目|align-content(flexcontainer)justify-content定义item在主轴上的对齐方式。item{justify-content:flex-start|弹性端|中心|space-between（两端对齐，item之间的间隔相等）|space-around（最边缘的itemitems之间的间隔等于border的间隔，item之间的间隔是item和border之间间隔的两倍）；}align-items定义项目在横轴（侧轴）上的对齐方式。item{align-items:flex-start|弹性端|中心|基线|拉伸（默认）；}align-content定义多个轴的对齐方式。如果该项目只有一个轴（当只有一行且没有换行符时），则此属性无效。item{对齐内容：flex-start|弹性端|中心|间隔|环绕空间|拉伸（默认）；}order定义item的排列顺序，值越小，顺序越高，default:0(flexitems).item{order:;}弹性增长|收缩|flex-basis(flexitems)flex(default:01auto)auto(11auto)none(00auto).item{flex:none|[<'flex-grow'><'flex-shrink'><'flex-basis'>];}flex-grow(default:0)请求父容器的剩余空间。flex-basis（默认值：auto）是宽度的替代品。在分配空间之前，它会先和父容器预留这么多空间，然后剩下的父容器再把剩下的空间分配给设置了flex-grow的容器。如果同时设置了flex-basis和width，width会被覆盖，即优先级为flex-basis>width。但是如果flex-basis和width中有auto，其他非auto属性的优先级会更高。flex-shrink（默认值：1）定义子容器的压缩率。宽度:300
