有什么方法可以让 CSS flex 向下流动同时有多列吗？

Question

我有以下弹性组件：

ul {
  display: flex;
  flex-direction: row;
  gap: 8px 32px;
    flex-wrap: wrap;
}

li {
flex-basis: calc(33% - 32px);
}

<ul>
    <li>Toni and Dwight Beavers</li>
    <li>Debra Coleman</li>
    <li>Ashley Dwight</li>
    <li>Paul and Madeline Green</li>
    <li>Jon and Allison Kelly</li>
    <li>Samar and William Longjohnson</li>
    <li>J. May Liang and James Linament</li>
    <li>Timothy R. Landry</li>
    <li>Carrie and David Mason</li>
    <li>Luke Frazier and Robert Peters</li>
    <li>Mei Xu and Allessandro Reiner</li>
    <li>Jennifer and Jimmy Revesi</li>
    <li>Cinthia and Horacio Rozalyn</li>
    <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
    <li>Angela and Kyle Westberger</li>
    <li>Linda D. Rabbitt and John Wheaton</li>
    <li>Kathie and Mike Wiener</li>
    <li>Rochdi Young</li>
</ul>

它看起来应该是这样的，但它从左到右流动，而客户希望它向下流动，以便每列按字母顺序向下排列。

我尝试使用第 3 列来执行此操作。

ul {
columns: 3
}

li {
padding-bottom: 8px;
padding-right: 32px
}

<ul>
        <li>Toni and Dwight Beavers</li>
        <li>Debra Coleman</li>
        <li>Ashley Dwight</li>
        <li>Paul and Madeline Green</li>
        <li>Jon and Allison Kelly</li>
        <li>Samar and William Longjohnson</li>
        <li>J. May Liang and James Linament</li>
        <li>Timothy R. Landry</li>
        <li>Carrie and David Mason</li>
        <li>Luke Frazier and Robert Peters</li>
        <li>Mei Xu and Allessandro Reiner</li>
        <li>Jennifer and Jimmy Revesi</li>
        <li>Cinthia and Horacio Rozalyn</li>
        <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
        <li>Angela and Kyle Westberger</li>
        <li>Linda D. Rabbitt and John Wheaton</li>
        <li>Kathie and Mike Wiener</li>
        <li>Rochdi Young</li>
    </ul>

这会按正确的顺序对它们进行排序，但不再定义行，并且元素不会像使用 flex 时那样水平对齐。

有什么办法可以两者兼得吗？无论是使用 Flex、列还是网格，我只想让它看起来与 Flex 相同（对齐行，所有元素在类似网格的外观中保持平衡），但沿着列向下流动而不是横向流动。就像下图一样，我通过将高度硬编码到每个 li 元素上来手动实现

Answer 1

CSS-Grid 可以通过定义的行数来管理。

ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(6, 1fr);
}

li {
  padding: .25em;
  border: 1px solid grey;
  margin-bottom: .25em;
}

<ul>
  <li>Toni and Dwight Beavers</li>
  <li>Debra Coleman</li>
  <li>Ashley Dwight</li>
  <li>Paul and Madeline Green</li>
  <li>Jon and Allison Kelly</li>
  <li>Samar and William Longjohnson</li>
  <li>J. May Liang and James Linament</li>
  <li>Timothy R. Landry</li>
  <li>Carrie and David Mason</li>
  <li>Luke Frazier and Robert Peters</li>
  <li>Mei Xu and Allessandro Reiner</li>
  <li>Jennifer and Jimmy Revesi</li>
  <li>Cinthia and Horacio Rozalyn</li>
  <li>Margarita Arroyave-Wessel and David Wemmer, MD</li>
  <li>Angela and Kyle Westberger</li>
  <li>Linda D. Rabbitt and John Wheaton</li>
  <li>Kathie and Mike Wiener</li>
  <li>Rochdi Young</li>
</ul>