在 Chrome、Safari 和 Edge 中显示 flex 对齐不正确，但在 Firefox 中正确

Posted 2023-03-06

【中文标题】在 Chrome、Safari 和 Edge 中显示 flex 对齐不正确，但在 Firefox 中正确

【英文标题】：Display flex alignment incorrect in Chrome, Safari and Edge, but correct in Firefox

【发布时间】：2018-10-31 20:52:09

【问题描述】：

我有一个使用 display flex 方法的 div，其中包含其他 div 也使用 display flex 来获得我想要的正确对齐。我通常使用 Firefox 开发我的网页，然后用其他浏览器对其进行测试，看看它们是否也能正常工作/显示。

我想要一个超级容器，它可以按正常流程排列其项目。这些项目包含两个图像。这些图像彼此相邻放置，只有它们的宽度是固定的。每个项目的高度可能不同。在这两张图片下方，我放置了一些文字。所有项目都对齐，使得文本的第一行彼此对齐。图片应放置在项目的水平中间。

下图显示了我希望它如何显示： Firefox correct display。在 Chrome 和 Edge（以及 ios 上的 Safari）中，图像如下所示：Incorrect display。

我有以下 html 和 CSS：

.CompleteContainer

  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;


.ItemContainer

  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;


.ItemTopContainer

  display: flex;
  justify-content: space-between;
  width: 100%;


.ItemTopLeftContainer

  align-items: flex-end;
  background-color: #ff8888;
  display: flex;
  justify-content: flex-end;
  width: calc(50% - 2px);


.ItemTopLeft

  background-color: #ff0000;
  height: 50px;
  width: 50px;


.ItemTopRightContainer

  align-items: flex-end;
  background-color: #88ff88;
  display: flex;
  justify-content: flex-start;
  width: calc(50% - 2px);


.ItemTopRight

  background-color: #00aa00;
  height: 25px;
  width: 50px;


.ItemBottomContainer

  text-align: center;

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

我做错了什么或者我错过了什么以使 Chrome 和 Edge 中的显示与 Firefox 中的显示相同？需要明确的是：在 Firefox 中，上面的代码 sn-p 给出了我想要的结果，在 Chrome 和 Edge（以及 iOS 上的 Safari）中它们是错误的。

更新：我还不能直接评论答案，但我会这样做。这两个答案确实为我指明了正确的方向，尽管它们没有产生我想要的正确结果。我已经更新了这个问题中的代码，以反映 CSS 中的更改以创建我想要的布局。

【问题讨论】：

我已经更新了原始帖子，以便它按照我想要的方式创建布局。

您上面的代码在 Firefox、Chrome 和 Edge 中为我呈现相同的布局。 jsfiddle.net/wku9wswp

@Michael_B：在 Firefox、Chrome 和 Edge 中呈现不同的原始代码被替换为呈现相同并产生我想要的输出的代码。可以在此处找到未呈现相同的原始代码：jsfiddle.net/k2gr4y69/1/

【参考方案1】：

.CompleteContainer

  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;


.ItemContainer

  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;


.ItemTopContainer

  width: 100%;
  display: flex;
  align-items: center;


.ItemTopLeftContainer

  align-items: flex-end;
  display: flex;
  float: left;
  height: 100%;
  justify-content: right;
  width: calc(50% - 2px);


.ItemTopLeft

  background-color: red;
  height: 50px;
  width: 50px;


.ItemTopRightContainer

  align-items: flex-end;
  display: flex;
  float: right;
  height: 100%;
  justify-content: left;
  width: calc(50% - 2px);


.ItemTopRight

  background-color: green;
  height: 25px;
  width: 50px;


.ItemBottomContainer

  text-align: center;

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>

【参考方案2】：

我在下面调整了您的代码，并在源代码中包含了文档。取出浮标。请注意浮动在 flexbox 中不起作用。

.CompleteContainer

  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 300px;


.ItemContainer

  align-items: center;
  background-color: aqua;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0 0 5px 10px;
  width: 130px;


.ItemTopContainer

  width: 100%;
  display: flex; /* Added */


.ItemTopLeftContainer

  align-items: flex-end; 
  display: flex;
  height: 100%;
  /* justify-content: right; "right" does not exist. */
  width: calc(50% - 2px);


.ItemTopLeft

  background-color: red;
  height: 50px;
  width: 50px;


.ItemTopRightContainer

  align-self: flex-end; /* Replacing align-items */
  /* Not necessary
  display: flex;
  height: 100%;
  justify-content: left;
  */
  width: calc(50% - 2px);


.ItemTopRight

  background-color: green;
  height: 25px;
  width: 50px;


.ItemBottomContainer

  text-align: center;

<div class="CompleteContainer">
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Foo bar, lorum ipsum
    </div>
  </div>
  <div class="ItemContainer">
    <div class="ItemTopContainer">
      <div class="ItemTopLeftContainer">
        <div class="ItemTopLeft">
          &nbsp;
        </div>
      </div>
      <div class="ItemTopRightContainer">
        <div class="ItemTopRight">
          &nbsp;
        </div>
      </div>
    </div>
    <div class="ItemBottomContainer">
      Lorum ipsum
    </div>
  </div>
</div>