我是靠谱客的博主 个性歌曲，最近开发中收集的这篇文章主要介绍css弹性盒子中父元素空间分配之flex-grow、flex-shrink、flex-basis，觉得挺不错的，现在分享给大家，希望可以做个参考。
概述
flex-basis——元素在主轴方向上的初始大小
该属性用来设置元素的宽度，优先级高于width
语法
/* 指定<'width'> */
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;
/* 固有的尺寸关键词 */
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;
/* 在flex item内容上的自动尺寸 */
flex-basis: content;
/* 全局数值 */
flex-basis: inherit;
flex-basis: initial;
flex-basis: unset;
flex-grow——设置或检索弹性盒子的扩展比率
1.该属性的默认值为 0，只能为数字
2.用来设置当父元素的宽度大于所有子元素的宽度的和时（即父元素会有剩余空间），子元素如何分配父元素的剩余空间。
3.0代表不索取空间，值越大，索取的越厉害。
flex-shrink————lex 元素的收缩规则
1.初始值为1，只能为数字
2.该属性用来设置，当父元素的宽度小于所有子元素的宽度的和时（即子元素会超出父元素），子元素如何缩小自己的宽度的。
3.值越大，减小的越厉害
4.如果值为0，表示不减小。
最后
以上就是个性歌曲为你收集整理的css弹性盒子中父元素空间分配之flex-grow、flex-shrink、flex-basis的全部内容，希望文章能够帮你解决css弹性盒子中父元素空间分配之flex-grow、flex-shrink、flex-basis所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复