flexflex的基本语法参考MDN:[https://developer.mozilla.org...]需要注意的点flex-basis是针对主轴的,主轴可以是x轴,也可以是y轴,为了书写方便,默认的主轴是x轴。flex-basis的优先级高于宽度。项目的宽度等于基本设置的值或宽度设置加上剩余空间平分后占用的部分的值。比如容器的宽度等于700pxitem1flex-grow=2flex-basicorwidth=100pxitem2flex-grow=1flex-basicorwidth=200pxitem3flex-basicorwidth=100px(flex-grow等于默认为0)item1最终宽度=(700-100-200-100)/(1+2)*2+100=300item1最终宽度=(700-100-200-100)/(1+2)*1+200=300item1FinalWidth=100设置flex属性,无论是单值语法还是双值语法都会改变flex-growflex-shrinkflex-basis的默认属性如flex:1;这是一个单值语法:1代表flex-grow的值,另外两个值会被省略。省略时,会有一个默认值flex-grow:省略时,默认值为1。(原默认值为0)flex-shrink:省略时,默认值为1。(原默认值为1)flex-grow:省略时默认值为0。(原来默认值为auto)所以flex:1等于flex:110,不是felx:11autoflex布局可以实现的几种效果前期准备工作
