CSS:如何正确使用 display=flex？

Question

所以我在使用 Bootstrap 的网格系统时发现了一个问题，即列的高度因内容而异。我在网上搜索并发现使用 flex。

看起来效果很好。我遇到的问题是，当我通过减小浏览器宽度在桌面上测试页面时，它会突然错位(请参见下面的屏幕截图)。

我还在 iPhone 上进行了测试，显示在竖屏模式下乱七八糟。拍风景就好了在 iPad 上完全没有问题，因为我猜它没有达到出现问题所需的宽度。

关于如何修复的任何想法？

---

我的 css(奇数/偶数类只是对行进行条纹处理，以便于查看)

div.table {
    margin: 0;
}

div.table-flex {
    display: flex;
    flex-wrap: wrap;
}

div.table div {
    padding: 12px;
}

div.table-flex [class*="col-"] {
    display: flex;
    flex-direction: column;
}

div.table div.odd {
    background-color: rgb(216, 216, 216);
    border: 1px solid white;
}

div.table div.even {
    background-color: rgb(238, 238, 238);
    border: 1px solid white;
}

我的 html

<div class="row table table-flex">
    <div class="col-sm-12 col-md-3 col-lg-3 odd">Mr First Last</div>
    <div class="col-sm-12 col-md-2 col-lg-2 even">12345</div>
    <div class="col-sm-12 col-md-3 col-lg-3 odd">CEO</div>
    <div class="col-sm-12 col-md-4 col-lg-4 even">Acme Corporation</div>
</div>

grid 仍然显示正常(此时，Firefox inspector 显示宽度在 510px 左右)

从上面的显示正常来看，我稍微减少了浏览器的宽度，结果变成了这个(奇怪的是，我期待 Firefox 检查员说宽度更小，因为我减少了浏览器宽度，但扩展到 542)

Answer 1

我不能给你一个直接的答案，因为没有提供给我们任何东西，但是你的 flex 元素可能会随着宽度的增加而增加，因为浏览器会进行配置。尝试添加

  flex-grow :0 

如果有足够的空间让 flex 增长，这个属性告诉 flex 不增长。默认情况下它是 1。虽然这会阻止它随着更大的浏览器尺寸而增长，但如果您希望它增加，这可能不是您的选择。试试看，让我知道。一旦您提供任何片段，我将更新我的答案

更新的答案 -

我设法解决了您的问题，但我不确定这是否符合您的要求。问题在于

div.table-flex 
{
   display: flex;
   flex-wrap: wrap;

} .

您的 CSS 文件中有两个几乎相同的元素，我不确定为什么，但它们似乎会混淆浏览器。一旦我向它添加了 flex-direction 和 flex-grow 属性，它就起作用了。看看让我知道。

div.table 
{
margin: 0;
}

div.table-flex 
{
display: flex;
flex-wrap: wrap;
flex-direction: column;
flex-grow: 0;
}

div.table div 
{
padding: 12px;
}

div.table-flex [class*="col-"] 
{
display: flex;
flex-direction: column;
flex-grow: 0;
}

div.table div.odd 
{
background-color: rgb(216, 216, 216);
border: 1px solid white;
}

div.table div.even {
background-color: rgb(238, 238, 238);
border: 1px solid white;
}

看看这个 fiddle 。 https://jsfiddle.net/zrvx06yw/