如何解决 flex 布局下子元素 width 宽度设置失效的问题

原创

喵喵侠

发布于 2024-06-11 03:03:11

4K0

文章被收录于专栏：喵喵侠的社区活动征文喵喵侠的社区活动征文喵喵学前端

前言

大家好，我是喵喵侠。在进行前端开发过程中，我们经常使用到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>

这样就知道原因了，下面我告诉你这个问题的解决办法。