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

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>

标签： htmlcssgoogle-chromefirefoxflexbox

Answer 1

消除justify-content: center;