CSS：如何正确使用 display=flex？答案

【问题标题】：CSS: How to properly use display=flex?CSS：如何正确使用 display=flex？
【发布时间】：2019-09-19 06:33:58
【问题描述】：

所以我在使用 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>

网格仍然显示正常（此时，Firefox 检查器显示宽度约为 510 像素）

从上面的显示确定，我将浏览器宽度减小了一点，然后它变成了这个（奇怪的是我希望 Firefox 检查器说宽度更小，因为我减小了浏览器宽度，但扩展到 542）

【问题讨论】：

可以加个sn-p吗...
没有工作的 sn-p 很难提供帮助。你能添加一个最小的、有效的 sn-p 吗？
你能告诉我两张图片的屏幕尺寸是多少吗？
使用表格设置。 stackoverflow.com/questions/11586277/…
你希望所有选项卡在一行中吗？在调整浏览器大小后，所有 4 列也应该显示在同一行中？？？

标签： css twitter-bootstrap bootstrap-grid

【解决方案1】：

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

  flex-grow :0

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

更新的答案 -

我设法解决了您的问题，但我不确定您想要多远。问题在于

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;
}

看看这个小提琴。 https://jsfiddle.net/zrvx06yw/

【讨论】：