如何解决 flex 布局下子元素 width 宽度设置失效的问题
原创如何解决 flex 布局下子元素 width 宽度设置失效的问题
原创
目录
前言
大家好，我是喵喵侠。在进行前端开发过程中，我们经常使用到flex布局，这种布局方式灵活便捷，但有时候也会遇到一些棘手的问题。例如，子元素宽度受挤压影响、子元素宽度超出父容器、设定的子元素宽度失效等情况。
本文将以我在实际开发中遇到的问题为例，通过具体案例来探讨这些问题的根源，并提供解决思路。在这个过程中，我们将深入探讨flex布局中的各种细节和技巧，帮助你更好地理解和应用这一灵活的布局方式。
问题描述
这个问题是我在做项目时候遇到的，当时有一个 div 容器盒子，里面的元素是垂直排列的，大概长这个样子：
里面的标题和图表，都是从上到下排列的。
为了给标题加一个下边框的效果，这里设计师设计了一个边框图片。我的实现思路是，把这张图直接放在标题的下面，由于图片设计效果是要稍微的斜边，需要包裹标题的一部分，这里我就用到了相对定位，配合 left 和 top来调整位置。
但很明显可以从图中看到，这张图的宽度不够，标题这一整行后面缺了一截，于是我想到了调整宽度。可当我设置宽度为 400px 后，发现一个奇怪的现象，那就是我设置的宽度，和实际表现的宽度不一致。如图所示：
随后无论我怎么调整宽度，都无法实际表现为我设置的宽度。
我当时百思不得其解，不知道是哪里出现了问题，还问了下朋友，朋友一时半会儿也没有发现问题，只是发现审查元素的时候，会有一个箭头，问我是不是用到了 flex 还是 grid 布局。
为此我写了一个jsbin 的在线 demo，复现了这个问题：
当我把 flex 布局去掉后，发现宽度显示就正常了！果然是 flex 的问题！
代码如下，感兴趣的朋友可以测试下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style type="text/css">
.box1{
display: flex;
width: 200px;
height: 200px;
border: 1px solid #000;
}
.box2{
width: 300px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>这样就知道原因了，下面我告诉你这个问题的解决办法。
解决办法
方案一：去掉 flex 布局（不推荐）
去掉 flex 布局，就不会有宽度的限制了，但很多时候我们又需要用到 flex 布局，因此这个方案不是很推荐。
方案二：设置 min-width（推荐）
min-width 的优先级，是大于 width 的，width 是会受到布局的影响，而 min-width 不会。
这种方法的好处在于，只需要改动有问题的元素，对父级和其他的元素没有影响，改动最小，效果也达到了。这样一看，效果很明显。
总结
在实际应用中，遇到flex布局下子元素宽度设置失效的问题，解决起来可能比想象中简单得多。尽管我们可能已经熟悉了flex布局的使用，但仍然可能会在特定情况下遇到挑战，这也提醒我们需要不断学习和探索。
Flex布局作为一种强大且灵活的布局方式，固然带来了很多便利，但也伴随着一些潜在的问题和陷阱。深入理解flex布局的特性和工作原理，能够帮助我们更好地解决各种布局问题，提升开发效率。
未来，我将继续撰写更多关于flex布局的文章，探讨更多可能遇到的问题并提供解决方案。通过分享经验和技巧，希望能够帮助更多的开发者更加熟练地应用flex布局，构建出更加稳健和灵活的前端界面。敬请期待！
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。