关于弹性盒子的一个bug（父盒子宽度）

最新推荐文章于 2022-12-05 10:16:27 发布

sha虫剂

最新推荐文章于 2022-12-05 10:16:27 发布

阅读量1.5k

点赞数

分类专栏：前端 flex bug 文章标签： css html5 css3

本文链接：https://blog.csdn.net/a1015895218/article/details/105972793

版权

前端同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

bug

5 篇文章 0 订阅

订阅专栏

flex

2 篇文章 0 订阅

订阅专栏

最近，在给一个刚开始学前端的朋友解决bug的时候发现了一个关于弹性盒子的bug，这个bug大多数人可能都会忽略，故而分享一下，希望大家不会再踩坑。

先上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }


  .box2 {
    display: flex;
  }

  ul {
    background-color: #96b9cd;
    width: 566px;
    height: 582px;
    margin-right: 30px;
    list-style: none;
  }

  li {
    width: 493px;
    margin-left: 28px;
    background: red;
    height: 50px;
  }
</style>

<body>
  <div class="box1">
    <div class="box2">
      <ul>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
</body>

</html>

代码效果
在这里插入图片描述
可以看到，这看起来很正常

但是请注意，我并没有给父盒子（box2）设置框度，这就造成了会有bug的出现

bug效果如图
在这里插入图片描述
可以看到，蓝色框与红色框右边的边距没了
通过样式的各种改变，发现给ul设置的宽度失效了，我们所能看到的宽度是被里面的li宽度撑开的

这种bug是怎么出现的呢

1、设置弹性盒的父盒子没有宽度
2、整个容器的宽度大于屏幕的宽度

那么要怎么解决这个bug呢

很简单，给父盒子（box2）设置宽度即可解决这个问题。

综上，刚开始学前端的小伙伴一定要注意，在使用弹性盒子的时候，一定要给父盒子设置一个明确的宽度，这个宽度怎样来的都行，无论是继承还是什么，但是得有，如果不写，就会造成如例子一样的bug，子盒子的宽度失效，从而导致排版出错

sha虫剂

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于弹性盒子的一个bug（父盒子宽度）

最近，在给一个刚开始学前端的朋友解决bug的时候发现了一个关于弹性盒子的bug，这个bug大多数人可能都会忽略，故而分享一下，希望大家不会再踩坑。先上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫

专栏目录