Chrome v Firefox 使用 flexbox 列换行的垂直间距差异

Question

我正在尝试使用 flexbox 创建一个多列无序列表。它在 Chrome 中运行良好，但在 Firefox 中最后一列的项目间距不正确。

结果Chrome：

Firefox 中的结果：

基本上我想让列表出现在 Firefox 中，就像它出现在 Chrome 中一样（即没有上面和下面的空格）。

下面是我的html代码

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 520px;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
}

li {
  margin-bottom: 15px;
}

<ul>
  <li>Afganistan Afghanistan</li>
  <li>Albania Albania</li>
  <li>Algeria Algeria</li>
  <li>American Samoa American Samoa</li>
  <li>Andorra Andorra</li>
  <li>Angola Angola</li>
  <li>Anguilla Anguilla</li>
  <li>Antigua & Barbuda Antigua & Barbuda</li>
  <li>Argentina Argentina</li>
  <li>Armenia Armenia</li>
  <li>Aruba Aruba</li>
  <li>Australia Australia</li>
  <li>Austria Austria</li>
  <li>Azerbaijan Azerbaijan</li>
  <li>Bahamas Bahamas</li>
  <li>Bahrain Bahrain</li>
  <li>Bangladesh Bangladesh</li>
  <li>Barbados Barbados</li>
  <li>Belarus Belarus</li>
  <li>Belgium Belgium</li>
  <li>Belize Belize</li>
  <li>Benin Benin</li>
  <li>Bermuda Bermuda</li>
  <li>Bhutan Bhutan</li>
  <li>Bolivia Bolivia</li>
  <li>Bonaire Bonaire</li>
  <li>Bosnia & Herzegovina Bosnia & Herzegovina</li>
  <li>Botswana Botswana</li>
  <li>Brazil Brazil</li>
  <li>British Indian Ocean Ter British Indian Ocean Ter</li>
  <li>Brunei Brunei</li>
  <li>Bulgaria Bulgaria</li>
  <li>Burkina Faso Burkina Faso</li>
  <li>Burundi Burundi</li>
  <li>Cambodia Cambodia</li>
  <li>Cameroon Cameroon</li>
  <li>Canada Canada</li>
  <li>Canary Islands Canary Islands</li>
  <li>Cape Verde Cape Verde</li>
  <li>Cayman Islands Cayman Islands</li>
</ul>

Answer 1

删除justify-content: center;

Answer 2

如评论和其他答案中所述，针对您的特定问题的解决方案很简单：删除 justify-content: center.

但这确实不是一个好的解决方案。

为什么 Chrome 不尊重 justify-content: center？
如果你真的希望最后一列在浏览器中垂直居中，你会怎么做？

您写道：

I'm trying to create a multicolumn unordered list using flexbox. It's working fine in Chrome but in Firefox the items' spacing for the last column is not correct.

实际上，情况恰恰相反：它在 Firefox 中运行良好，但在 Chrome 中运行不正常。

这里问题的根源在于各个浏览器对max-height的解释。

Firefox 在应用 justify-content 时会考虑完整的允许高度 (520px)，从而为居中工作创建额外的 space。简而言之，Firefox 将 max-height 视为 height。

Chrome 没有。 justify-content: center 在您使用 height 时有效，但不适用于 max-height。在这里测试：

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* max-height: 520px; */
  height: 520px;  /* new */
  justify-content: center;
  list-style-type: none;
}

li {
  margin-bottom: 15px;
}

<ul>
  <li>Afganistan Afghanistan</li>
  <li>Albania Albania</li>
  <li>Algeria Algeria</li>
  <li>American Samoa American Samoa</li>
  <li>Andorra Andorra</li>
  <li>Angola Angola</li>
  <li>Anguilla Anguilla</li>
  <li>Antigua & Barbuda Antigua & Barbuda</li>
  <li>Argentina Argentina</li>
  <li>Armenia Armenia</li>
  <li>Aruba Aruba</li>
  <li>Australia Australia</li>
  <li>Austria Austria</li>
  <li>Azerbaijan Azerbaijan</li>
  <li>Bahamas Bahamas</li>
  <li>Bahrain Bahrain</li>
  <li>Bangladesh Bangladesh</li>
  <li>Barbados Barbados</li>
  <li>Belarus Belarus</li>
  <li>Belgium Belgium</li>
  <li>Belize Belize</li>
  <li>Benin Benin</li>
  <li>Bermuda Bermuda</li>
  <li>Bhutan Bhutan</li>
  <li>Bolivia Bolivia</li>
  <li>Bonaire Bonaire</li>
  <li>Bosnia & Herzegovina Bosnia & Herzegovina</li>
  <li>Botswana Botswana</li>
  <li>Brazil Brazil</li>
  <li>British Indian Ocean Ter British Indian Ocean Ter</li>
  <li>Brunei Brunei</li>
  <li>Bulgaria Bulgaria</li>
  <li>Burkina Faso Burkina Faso</li>
  <li>Burundi Burundi</li>
  <li>Cambodia Cambodia</li>
  <li>Cameroon Cameroon</li>
  <li>Canada Canada</li>
  <li>Canary Islands Canary Islands</li>
  <li>Cape Verde Cape Verde</li>
  <li>Cayman Islands Cayman Islands</li>
</ul>

我对这种行为进行了一些研究，但找不到准确的错误报告或简单的解决方法。这可能是 Chrome 中的错误，或者可能只是另一个 intervention.

An intervention is when a user agent decides to deviate slightly from a standardized behavior in order to provide a greatly enhanced user experience.

干预似乎是 Chrome 的标准做法。这里的例子：

此外，Edge 遵循 Chrome 的行为。

Chrome v Firefox 使用 flexbox 列换行的垂直间距差异

Vertical spacing difference in Chrome v Firefox using flexbox column wrap

html

css

firefox

google-chrome

flexbox