搭建什么网站赚钱,wordpress 获取页面的名称,网站建站商城,写网站方案什么是flex#xff1a;1#xff1f;
在css中#xff0c;我们经常可以看到这样的写法#xff1a;
.box {display: flex;
}.item {flex: 1;
}这里的flex:1相当于flex: 1 1 0%#xff0c;它是一个简写属性#xff0c;表示项目#xff08;flex item#xff09;在弹性容器…什么是flex1
在css中我们经常可以看到这样的写法
.box {display: flex;
}.item {flex: 1;
}
这里的flex:1相当于flex: 1 1 0%它是一个简写属性表示项目flex item在弹性容器flex container中如何伸缩。它相当于flex: 1 1 0%包含了三个子属性
flex-grow 定义项目的放大比例默认为0即如果存在剩余空间也不放大。flex-shrink 定义了项目的缩小比例默认为1即如果空间不足该项目将缩小。flex-basis 定义在分配多余空间之前项目占据的主轴空间main size浏览器根据此属性计算主轴是否有多余空间默认值为 auto 即项目本身的大小。
flex:1的作用
使用flex:1的作用是让项目能够自动填充剩余空间实现自适应布局。例如我们有一个水平排列的三个项目它们的内容长度不一样我们想让它们平均占据一行的空间就可以给它们都设置flex:1\
div classcontainerdiv classitemHello/divdiv classitemWorld/divdiv classitemFlex/div
/div
.container {display: flex;
}.item {flex: 1;
}
这样无论容器的宽度如何变化项目都会自动调整宽度保持平均分配。
flex:1和其他值的区别
flex属性还可以取其他值例如
flex: none相当于flex: 0 0 auto表示项目不会伸缩保持原始大小。flex: auto相当于flex: 1 1 auto表示项目会根据自身大小和剩余空间进行伸缩。flex: nn为正整数相当于flex: n 1 0%表示项目的放大比例为n其他值默认。
我们可以通过修改上面的例子来观察不同值的效果
div classcontainerdiv classitem noneHello/divdiv classitem autoWorld/divdiv classitem oneFlex/div
/div
.container {display: flex;
}.item {border: 1px solid black;
}.none {flex: none;
}.auto {flex: auto;
}.one {flex: 1;
}
可以看到none类的项目保持了原始大小auto类的项目根据内容长度进行了伸缩one类的项目平分了剩余空间。
felx1和flexauto的区别
flex-basis属性定义了项目在分配多余空间之前占据的主轴空间main size。flex:1相当于flex: 1 1 0%表示项目的基准大小为0%不考虑项目本身的大小只根据剩余空间进行伸缩。flex:auto相当于flex: 1 1 auto表示项目的基准大小为auto即项目本身的大小同时也会根据剩余空间进行伸缩。
这样当容器的大小变化时两者的表现也不同。
如果容器有足够的空间flex:1和flex:auto都会平分剩余空间但是flex:auto会保持项目本身的最小宽度而flex:1不会。如果容器没有足够的空间flex:1会优先压缩内容使得所有项目都能等分空间而flex:auto会优先保持内容的完整性挤压其他项目的空间。
总结
flex:1是一个常用的CSS属性它可以让项目在弹性容器中自动填充剩余空间。 它是一个简写属性包含了三个子属性flex-grow, flex-shrink, flex-basis。 它相当于flex: 1 1 0%flex1和flexauto都会占满剩余空间我们可以根据合适的需求去选择这两种属性。
