使用Flexbox出现意外的空白空间 [英] Unexpected empty space using flexbox

问题描述

在问题仍然存在的情况下，我已将问题减少到最低程度。

I've reduced the problem to the minimum possible where the issue is still present.

我不知道橙色空间来自何处。

线索：删除一张图片橙色空间消失了。...

A clue: Removing one image the orange space goes away....

.OutterContainer {
  display: flex;
  flex-wrap: wrap;

  flex-direction: column;

  background-color: orange;
}

.InnerContainer {
  display: flex;

  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;

  background-color: purple;
}

<div class="OutterContainer">
    <div>
        <div class="InnerContainer">
            <div class="InnerItem">
                <img src="http://via.placeholder.com/100x100">
                <img src="http://via.placeholder.com/100x100">
            </div>
        </div>
    </div>
</div>

推荐答案

某种程度上是一个错误，但这是我对行为的解释：

It's somehow a bug but here is my explanation of the behavior:

让我们删除一些属性并遵循代码。

Let's remove some properties and follow the code.

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  /*flex-basis: 90%;*/
  background-color: purple;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

此代码似乎好。我们有一个具有行方向的Flex容器，并以 div 作为flex项。默认情况下，此 div 将适合其内容宽度。 innerItem 也是如此。现在，通过添加低于100％的flex-basis，这两个图像将不适合容器的宽度，并且我们将换行，从而所有元素的高度都会增加（包括橙色框）。

This code seems ok. We have a flex container with a row direction and a div as a flex item. This div will by default fit its content width. Same thing for the innerItem. Now by adding a flex-basis lower than 100% both images won't fit the container width and we will have a line break thus the height of all the elements will increase (including the orange box).

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  /*flex-direction: column;*/
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

现在，如果我们切换到保持相同高度的列方向。就像浏览器根据行方向计算高度并将结果保留为列方向一样。

Now if we switch to a column direction the same height is kept. It's like the browser did the calculation of the height based on the row direction and kept the result for the column direction.

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

还有默认对齐方式为strech，因此，如果将对齐方式更改为其他方式，我们将返回到之前的状态：

There is also the fact that the default alignment is strech so if you change the alignment to something else we will get back to the previous state:

.OutterContainer {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items:flex-start;
  background-color: orange;
}

.InnerContainer {
  display: flex;
  background-color: blue;
}

.InnerItem {
  flex-basis: 90%;
  background-color: purple;
}

<div class="OutterContainer">
  <div style="border:1px solid;">
    <div class="InnerContainer">
      <div class="InnerItem">
        <img src="http://via.placeholder.com/100x100">
        <img src="http://via.placeholder.com/100x100">
      </div>
    </div>
  </div>
</div>

对于一张图像，您不会遇到问题，因为从逻辑上讲，没有办法像多个图像一样进行换行。

With one image you cannot have the issue because logically there is no way to have a line break like with more than one.

这篇关于使用Flexbox出现意外的空白空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！