解决父元素display:flex布局下的子元素宽度无效问题

代码2020-11-031,357 人已阅来源:网络

因为设置了display: flex; 导致block布局变成了flex布局, 所以在子元素宽度没有被撑破的情况下,子元素宽度是有效的,但是当子元素内容过多,此时宽度会比实际宽度小,所以如果想要在已经设置了flex布局的基础上,再进行子元素宽度的设置,可以应用下面的样式:(在该子元素上设置)

实现效果

使用flex进行左右布局,左边定宽200px,右边自适应,当右边内容过多,造成右边盒子被撑开,会造成两种问题

1、左边定宽盒子被压缩

flex-grow:0;//是否自动增长空间
flex-shrink:0;//是否自动缩小空间

2、右边自适应的盒子被撑开

flex:1;
width:0;