我可以在 CSS 中更改这些列的顺序吗？ [复制]答案

【问题标题】：Can I change the order of these columns in CSS? [duplicate]我可以在 CSS 中更改这些列的顺序吗？ [复制]
【发布时间】：2018-07-08 07:18:03
【问题描述】：

我有多个数据列表，由 HTML 中的无序列表组成，我试图让它们显示在 2 列中。

我让它们显示为“列”，但我无法让这些列显示我想要的方式。

如果您查看下面的 sn-p，您可以看到列在 2 列中对齐，但我希望列是连续的，所以左列中的 A、B、C、D 和 D，右栏中的 E、F 等。

我使用过 Flexbox 并一直在搞乱flex-direction，但无济于事。有小费吗？我究竟做错了什么？另外，这是Fiddle。

ul {
  display: flex;
  width: 500px;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

我知道这很愚蠢和微不足道，但我错过了什么？我也在使用 Sass。

【问题讨论】：

您真的需要在 HTML 中对您的lis 进行排序吗？如果是这样，您仍然可以使用 CSS 奇偶校验规则：ul:nth-child(even) { /* even rows */ } / ul:nth-child(odd) { /* odd rows */ }
@Kaddath 我显示的数据是按字母顺序排列的，并且要求它们像这样排序。

标签： html css flexbox

【解决方案1】：

您可以使用grid 和grid-auto-flow，因此您将自动放置设置为column，检查以下sn-p：

ul {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(2, 125px);
  grid-auto-flow: column;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

【讨论】：

【解决方案2】：

使用flex-direction: column; 和ul 的高度。这样弹性项目是自上而下排列的，而不是从左到右（一行）。高度确保列包裹。如果您想使用 flexbox 执行此操作，这是必需的。

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 75px;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

【讨论】：

【解决方案3】：

如果不设置元素的高度，这是不可能的，你可能不想这样做。

但是，您可以使用column-count 设置列数，这将使每列包含大约相同数量的项目。

ul {
  column-count: 2;
  column-gap: 35px;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

【讨论】：

【解决方案4】：

您必须为此添加flex-direction: column;。但在这种情况下，您还必须设置一个固定的高度。

ul {
  display: flex;
  width: 500px;
  height: 80px;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
}
ul li {
  width: 50%;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

【讨论】：

【解决方案5】：

您不是在列中显示它们，而是在换行的行中显示它们。

如果您需要 在 flexbox 中 的列格式，您需要使用 flex-direction:column 并设置一个高度，以便 flexbox 知道何时换行。

ul {
  display: flex;
  width: 500px;
  flex-direction: column;
  flex-wrap: wrap;
  height: 5em;
}

<ul>
  <li>A</li>
  <li>B</li>
  <li>C</li>
  <li>D</li>
  <li>E</li>
  <li>F</li>
  <li>G</li>
</ul>

【讨论】：

【解决方案6】：

在 IE 中显示 : flex 存在问题，我建议您使用此代码将适用于所有浏览器：

ul {
    -moz-column-count: 2;
    -moz-column-gap: 20px;
    -webkit-column-count: 2;
    -webkit-column-gap: 20px;
    column-count: 2;
    column-gap: 20px;
}

【讨论】：