Html 我可以更改CSS中这些列的顺序吗？

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

我让它们显示为“列”，但我无法让列显示我希望它们显示的方式

如果您查看下面的代码段，您可以看到两列对齐，但我希望列是连续的，因此A、B、C、d在左列，d、E、F等在右列

我用过Flexbox，一直在玩弄

flex direction

，但都没用。有什么建议吗？我做错了什么？还有，这里有一个例子

ul{
显示器：flex；
宽度：500px；
调整项目：灵活启动；
柔性包装：包装；
}
ulli{
宽度：50%；
}

A
B
C
D
E
F
G

显示有一个问题：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;
}

---

IE中的display:flex有一个问题，我建议您使用此代码将适用于所有浏览器：

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

---

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

如果您需要flexbox中的列格式，则需要使用

flex direction:column

并设置高度，以便flexbox知道何时进行换行

ul{
显示器：flex；
宽度：500px；
弯曲方向：立柱；
柔性包装：包装；
身高：5公分；
}

A
B
C
D
E
F
G

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

如果您需要flexbox中的列格式，则需要使用

flex direction:column

并设置高度，以便flexbox知道何时进行换行

ul{
显示器：flex；
宽度：500px；
弯曲方向：立柱；
柔性包装：包装；
身高：5公分；
}

A
B
C
D
E
F
G

您必须添加

弹性方向：列。但在这种情况下，您还必须设置一个固定的高度


ul{
显示器：flex；
宽度：500px；
高度：80px；
弯曲方向：立柱；
调整项目：灵活启动；
柔性包装：包装；
}
ulli{
宽度：50%；
}

A
B
C
D
E
F
G
您必须添加
弹性方向：列。但在这种情况下，您还必须设置一个固定的高度


ul{
显示器：flex；
宽度：500px；
高度：80px；
弯曲方向：立柱；
调整项目：灵活启动；
柔性包装：包装；
}
ulli{
宽度：50%；
}

A
B
C
D
E
F
G
使用
弯曲方向：列和
ul
上的高度。通过这种方式，弹性项从上到下排列，而不是从左到右（一行）。该高度确保柱包裹。如果要使用flexbox执行此操作，则需要此选项


ul{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：75px；
}
ulli{
宽度：50%；
}

A
B
C
D
E
F
G
使用
弯曲方向：列和
ul
上的高度。通过这种方式，弹性项从上到下排列，而不是从左到右（一行）。该高度确保柱包裹。如果要使用flexbox执行此操作，则需要此选项


ul{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：75px；
}
ulli{
宽度：50%；
}

A
B
C
D
E
F
G
如果不设置元素的高度，则无法执行此操作，而您可能不希望这样做

但是，您可以使用
列计数
来设置列数，使每列包含的项目数大致相同


ul{
列数：2；
柱间距：35px；
}

A
B
C
D
E
F
G
如果不设置元素的高度，则无法执行此操作，而您可能不希望这样做

但是，您可以使用
列计数
来设置列数，使每列包含的项目数大致相同


ul{
列数：2；
柱间距：35px；
}

A
B
C
D
E
F
G
您可以使用
网格
和
网格自动流动
，因此您可以将自动放置设置为
列
，检查以下代码片段：


ul{
显示：网格；
网格模板行：重复（4，1fr）；
网格模板列：重复（2125px）；
网格自动流：列；
}

A
B
C
D
E
F
G
您可以使用
网格
和
网格自动流动
，因此您可以将自动放置设置为
列
，检查以下代码片段：


ul{
显示：网格；
网格模板行：重复（4，1fr）；
网格模板列：重复（2125px）；
网格自动流：列；
}

A
B
C
D
E
F
G
您真的需要在HTML中订购
li
s吗？如果是这样的话，您仍然可以使用CSS奇偶校验规则：
ul:nth child（偶数）{/*偶数行*/}
/
ul:nth child（奇数）{/*奇数行*/}
@Kaddath我显示的数据是按字母顺序排列的，需要这样排序。您真的需要对
li
进行排序吗