写在前面。本文仅列出flex和grid布局的一些基本概念和新属性，用于自查相关知识的掌握情况。具体教程和示例请参考文末参考资料。弹性布局概念弹性容器（flexcontainer）弹性项目（flexitem）主轴（mainaxis）主轴位置（mainstart,mainend）主轴空间（mainsize）交叉轴（crossaxis）交叉轴位置（crossstart,crossend)crossaxisspace(crosssize)属性容器属性flex-directionrowrow-reversecolumncolumn-reverseflex-wrapnowrapwrap-reverseflex-flow双参数：flex-direction,flex-wrapjustify-contentflex-startflex-endcenterspace-betweenspace-aroundalign-itemsflex-startflex-endcenteralignbaselinestretch-content(仅在wrap发生时有效)flex-startflex-endcenterstretchspace-betweenspace-aroundProject属性orderDefault:0flex-grow默认:0flex-shrinkDefault:1flex-basis默认:autoflex三个参数:flex-grow,flex-shrink,flex-basisalign-selfautoflex-startflex-endcenterbaselinestretchTips：最好把item的三个flex参数都写上。其实：flex:01auto≠flex:01但是常见的写法：flex:1的意思是：如果有剩余空间，则填充该item；但是如果空间不够（超出父容器），还有：flex:1≠flex:11auto虽然flex参数2和3的默认值是：1autoitemflex属性：默认值：01auto参数1：0表示不展开，非0表示参与比例运算展开参数2：0表示不压缩，非0表示参与比例运算压缩参数3：auto表示默认大小，常用的还有百分比（相对于父元素）和固定尺寸；flex-grow：当父容器有剩余空间时生效；flex-shrink：超过父容器总空间时生效；柔性-basis：分配剩余空间前的预处理；grid布局概念grid容器gridgridlinegridunitgridareagridtrackattributecontainerattributegrid-template-rowsgrid-template-columnsgrid-template-aresareaareaareaarea属性grid-area参考flexlayout教程：语法作者：阮一峰flex布局教程：实例作者：阮一峰采用20/80原则学习CSS网格布局（译）作者：一布
