当前位置: 首页 > Web前端 > CSS

flex的理解:1

时间:2023-03-30 17:52:55 CSS

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布局可以实现的几种效果前期准备工作item1

item2
item3
等距布局。内容{显示:flex;宽度:800px;高度:100px;}.item1{背景色:#eee;flex:1;}.item2{背景色:#ccc;flex:1;}.item3{背景色:#bbb;弹性:1;}item1比item2和item3.content宽200px{display:flex;宽度:800px;高度:100px;}.item1{背景色:#eee;flex:1200px;}.item2{背景色:#ccc;flex:1;}.item3{背景色:#bbb;flex:1;}item1是item2和item3.content的两倍宽{display:flex;宽度:800px;height:100px;}.item1{background-color:#eee;flex:2;}.??item2{背景色:#ccc;flex:1;}.item3{背景色:#bbb;flex:1;}通过multiples.content{分配容器的宽度显示:弹性;宽度:600px;高度:100px;}.item1{背景色:#eee;flex:1;}.item2{背景色:#ccc;flex:2;}.??item3{背景色:#bbb;弹性:3;}