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

Posted 2023-03-05

【中文标题】使用 flexbox 列换行的 Chrome v Firefox 中的垂直间距差异

【英文标题】：Vertical spacing difference in Chrome v Firefox using flexbox column wrap

【发布时间】：2021-09-20 10:56:12

【问题描述】：

我正在尝试使用 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>

【问题讨论】：

justify-content: center 告诉浏览器将内容垂直居中。

我刚刚注意到了。我的错！

恕我直言，flexbox首先是错误的方法。这可以通过普通的css-column

轻松实现

【参考方案1】：

删除justify-content: center;

【参考方案2】：

如 cmets 和其他答案中所述，解决您的具体问题的方法很简单：删除 justify-content: center。

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

为什么 Chrome 不尊重 justify-content: center？

如果您真的希望最后一列在浏览器中垂直居中，您会怎么做？

你写道：

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

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

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

Firefox 在应用justify-content 时会考虑完全允许的高度（520 像素），从而为居中工作创造了额外的空间。简而言之，Firefox 将max-height 视为height。

Chrome 没有。如果您使用height，justify-content: center 有效，但不适用于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。

干预是指用户代理决定稍微偏离标准化行为以提供显着增强的用户体验。

干预似乎是 Chrome 的标准做法。这里的例子：https://***.com/a/52284406/3597276

此外，Edge 遵循 Chrome 的行为。

【讨论】：

这是 Blink 中的一个错误。我提交了crbug.com/1228023