首页
> 计算机技术
> 前端开发
> Html/Css
flex响应式布局的宽度或高度被内容撑开的解决方法
原创 lihf8515于2025年02月12日 20:28发表
来源:本站 阅读:97
在flex响应式布局中，我们遇到大量文字内容的情况，结果布局被撑开，宽度或者高度超出了屏幕的显示范围，页面看起来难看，没有起到良好的屏幕适配效果。
其实，这个主要是其父元素的css属性设置不正确导致。
如果父元素的 flex-direction:row ，我们需要把父元素的 min-width 或者 width 设置为0即可。
如果父元素的 flex-direction:column ，我们需要把父元素的 min-height 或者 height 设置为0即可。
css代码如下：
.flex-container{
display:flex;
flex-wrap: wrap;
word-wrap: break-word;
justify-content: space-between;
width: 100%;
}
.flex-auto{
flex: 1;
min-width:0;
}
下一篇：nginx服务器如何限制流量
阅读排行榜
皖公网安备34130202000765号