【发布时间】：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">
</div>
</div>
<div class="ItemTopRightContainer">
<div class="ItemTopRight">
</div>
</div>
</div>
<div class="ItemBottomContainer">
Foo bar
</div>
</div>
<div class="ItemContainer">
<div class="ItemTopContainer">
<div class="ItemTopLeftContainer">
<div class="ItemTopLeft">
</div>
</div>
<div class="ItemTopRightContainer">
<div class="ItemTopRight">
</div>
</div>
</div>
<div class="ItemBottomContainer">
Foo bar, lorum ipsum
</div>
</div>
<div class="ItemContainer">
<div class="ItemTopContainer">
<div class="ItemTopLeftContainer">
<div class="ItemTopLeft">
</div>
</div>
<div class="ItemTopRightContainer">
<div class="ItemTopRight">
</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/
标签： css firefox flexbox webkit microsoft-edge