containercss.flex-container{/*主轴方向：行（水平）|row-reverse反向到行|列列（垂直）|column-reverse反转列*/flex-direction:row;/*wrap:nowrap不换行|包裹包裹|wrap-reverse反向换行（wrapup）*/flex-wrap:nowrap;/*上面两个的简写*//*flex-flow:||对齐方式，竖直对齐就是顶部对齐)flex-end主轴端点对齐center主轴中点对齐space-between两端对齐space-around两端对齐，每一项两边等间距，向中间靠拢*/证明内容：flex-start；/*横轴对齐：flex-start|弹性端|centerbaseline项目第一行文本的基线对齐并拉伸。如果item没有设置高度或者设置为auto，会占据整个容器高度*/align-items:stretch;/*多轴交叉轴对齐（换行时可生成多轴，不换行只有一个轴无效）：flex-start|弹性端|center两边间隔相等向中间拉伸，所有轴占据整个容器*/align-content:stretch;}itemcss.flex-item{/*排列顺序：值越小排列越高,默认为0*/order:0;/*放大比例，与设置该值的item成比例，占满空间，默认为0，即有剩余空间则不放大*/flex-grow:0;/*shrinkRatio，当主轴总宽度超过100%时，当前item会按比例缩小，默认为1，即空间不足时，item会收缩*/flex-shrink:1;/*初始值，分配多余空间前的初始长度（主轴水平时的宽度）【width/height可用的长度值，如1px/1em/1rem/auto/30%等】浏览器计算根据这个属性，主轴是否有额外的空间。它的默认值为auto，即项目的原始大小。*/弹性基础：自动；/*以上三项的简写*//*flex:none|[<'flex-grow'><'flex-shrink'>?||<'弹性基础'>];*//*语法糖分析：//none快捷键flex:none=flex:00auto//number(grow,shrink=1,basis=0)flex:2=flex:210//number,number(grow,shrink,basis=0)flex:23=flex:230//非数字(grow=1,shrink=1,basis)flex:30px=flex:1130pxflex:30%=flex:1130%flex:auto=flex:11auto//number,non-number(grow,shrink=1,basis)flex:230px=flex:2130pxflex:230%=flex:2130%flex:2auto=flex:21auto//数字，数字，非数字（增长，收缩，基础）flex:2330pxflex:2330%flex:2330%auto*//*自对齐：自动|弹性启动|弹性端|中心|基线|stretch默认值为auto，表示继承父元素的align-items属性。如果没有父元素，相当于stretch*/align-self:auto;}