Question

我的网页上有一个问题，当在移动设备上查看该网站时，该问题涉及在flexboxes旁边弹出边距。我把这个问题简化为一些非常简单的代码。

HTML代码

<html>
    <head>
        <link href="style.css" rel="stylesheet">
    </head>
    <body>

        <div class="container">
            <!-- When you remove this period, issue goes away -->
        .

            <div class="smallboxes">
                <div class="smallbox1">
                </div>
                <div class="smallbox2">
                </div>
            </div>

            <div class="bigbox">
            </div>

        </div>

    </body>
</html>

CSS代码

.container {
display: flex;
height: 100px;
}

.bigbox {
flex: 2;
background-color: #6e6e6e;
display: flex;
}

.smallboxes {
flex: 1;
display: flex;
flex-direction: column;
}

.smallbox1 {
flex: 2;
background-color: #6e6e6e;  
}

.smallbox2 {
flex: 1;
}

在Chrome中运行代码时，右键单击，单击“检查”，在水平模式下查看为IPad Pro，然后将视图更改为75％或125％。你会在两个盒子之间看到一条白线。这也出现在我的Note 5中。两个灰色框之间应该没有线。

正如我在代码中提到的，当您删除期间时，问题就会消失。

非常感谢你的帮助！

P.S。我是SO的新手，似乎无法弄清楚如何插入“运行codepen on this code”按钮。我也包含了一个指向codepen版本的链接。

http://codepen.io/jasonhoward64/pen/XMpYXJ

Answer 1

编辑：基于作者评论的新答案

我一直在使用您的Codepen，问题在于使用“Flex：1”。 Flex在“容器”中创建所需的空间。如果你给“.bigBox”flex：2;和“.smallBoxes”flex：1;它将“.container”分成3个部分，bigBox将占用2.当你在容器内添加一个项目而不给它一个flex值时，它会尝试计算所需的空间。尝试将点放在span或div（或其他元素）中，并为其赋予flex值。这将解决您的问题。

.container {
  display: flex;
  height: 100px;
  background: red
}

.bigbox {
  flex: 5;
  background-color: #6e6e6e;
  display: flex;
}

.testBox {
  background: yellow;
  flex: 1;
}

.smallboxes {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.smallbox1 {
  flex: 2;
  background-color: #6e6e6e;	
}

.smallbox2 {
  flex: 1
}

<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <!-- When you remove this period, issue goes away -->	<span class="testBox">test</span>
      <div class="smallboxes">
        <div class="smallbox1">
        </div>
        <div class="smallbox2">
        </div>
      </div>

      <div class="bigbox">
      </div>

    </div>

  </body>
</html>

Answer 2

你的代码是有效的，但是当你向身体添加0的边距时，它会再次中断。你知道为什么吗？

body {
margin: 0;
}

.container {
  display: flex;
  height: 100px;
  background: red
}

.bigbox {
  flex: 5;
  background-color: #6e6e6e;
  display: flex;
}

.testBox {
  background: yellow;
  flex: 1;
}

.smallboxes {
  flex: 3;
  display: flex;
  flex-direction: column;
}

.smallbox1 {
  flex: 2;
  background-color: #6e6e6e;	
}

.smallbox2 {
  flex: 1
}

<html>
  <head>
    <link href="style.css" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <!-- When you remove this period, issue goes away -->	<span class="testBox">test</span>
      <div class="smallboxes">
        <div class="smallbox1">
        </div>
        <div class="smallbox2">
        </div>
      </div>

      <div class="bigbox">
      </div>

    </div>

  </body>
</html>

在移动设备上查看时，Flexbox之间的不受欢迎的保证金

2 个答案: