flex-grow:grow的中文意思是扩大,用来分配父元素剩余空间的相对比例。默认值为0。我们先看一个例子: /* 父元素 */.flex-box{display: flex;width:300px;height:300px;margin:0auto;background-color:#000; }/* 子元素left */.left{flex-grow:1;width:100px;background-color: orange; }/* 子元素right...
border:1pxsolid#c3c3c3; display:flex; } #maindiv:nth-of-type(1){flex-grow:1;} #maindiv:nth-of-type(2){flex-grow:3;} #maindiv:nth-of-type(3){flex-grow:1;} #maindiv:nth-of-type(4){flex-grow:1;} #maindiv:nth-of-type(5){flex-grow:1;} 注意:<...
1、flex-grow指扩展flex子项所占据的宽度,扩展的空间就是除去元素外剩余的空白间隙。 2、不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。 如果flex-grow大于0,则flex容器剩余空间的分配就会发生。 实例 // HTML部分 // CSS部分 .box{ width: 600px; height: 200px; border: 1px solid; ...
border: 1px solid #c3c3c3; display: flex; } #main div:nth-of-type(1) {flex-grow: 1;} #main div:nth-of-type(2) {flex-grow: 3;} #main div:nth-of-type(3) {flex-grow: 1;} #main div:nth-of-type(4) {flex-grow: 1;} #main div:nth-of-type(5) {flex-grow: 1;} ...
1、flex-grow指扩展flex子项所占据的宽度,扩展的空间就是除去元素外剩余的空白间隙。 2、不支持负值,默认值是0,表示不占用剩余的空白间隙扩展自己的宽度。 如果flex-grow大于0,则flex容器剩余空间的分配就会发生。 实例 //HTML部分 // CSS部分.box...