Flexbox在firefox中看起来完全不同

Posted 2021-03-30

我认为这个问题可能被认为是“noobish”，但我想知道为什么我的flexbox在firefox中看起来完全不同。我忘记了什么任何帮助非常感谢。我担心这是我错过的非常简单的事情

这就是它的样子：

Chrome：

Firefox： 我的代码：

CSS：

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
 -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}
.flex-item {
    border: 1px solid black;
    margin: 30px;
    /* max-width: 350px; */
    max-height: 350px;
    min-height: 72px;
    text-align: center;
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

html：

<div class="flex-container">
    <div class="flex-item">
        <div id="catBox">
            Kategorie 1
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    </div>

    <div class="flex-item">
        <div id="catBox">
            Kategorie 2
        </div>
    <div class="flex-item">
        <div id="catBox">
            Kategorie 3
        </div>
</div>

答案

这是一个演示。

.flex-container {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  line-height: 30px;
}

.flex-item {
  border: 1px solid black;
  margin: 20px;
  height:35vh;
  text-align: center;
  flex: 1;
}

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

<div class="flex-container">
  <div class="flex-item">
    <div id="catBox">
      Kategorie 1
    </div>
  </div>

  <div class="flex-item">
    <div id="catBox">
      Kategorie 2
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 3
    </div>
  </div>
  <div class="flex-item">
    <div id="catBox">
      Kategorie 4
    </div>
  </div>
</div>

另一答案

可能原因是你检查了Firefox version。

在57.0.1，我看到了相同的结果。

以上是关于Flexbox在firefox中看起来完全不同的主要内容，如果未能解决你的问题，请参考以下文章

Flexbox 子项在 Safari 中呈现错误

一段在 Firefox 中看起来不错但在 IE 中看起来不错的 html/css

网站在 Firefox 中看起来不太好

Firefox 和 Chrome 中 Flexbox 的不同实现

不同的字体大小 - Chrome 与 Firefox

Web 字体仅在 Firefox 中看起来不连贯