html - 如何在 5 个元素之后包装列表？

Question

我们有一个无序列表，最多显示 10 个元素。我们如何设置列表，使其将前五个元素放在左侧，并将接下来的五个元素放入下一列(平均分配)？

这是当前和期望的输出。我们尝试使用 CSS Flexbox ，但无法找到一种方法来做到这一点。如果 flexbox 无法完成，请接受其他想法。

这是当前结果和期望的输出。

ul {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
}

<div>
<ul>
  <li>Assertively mesh</li>
  <li>client-centered</li>
  <li>niches and covalent networks</li>
  <li>Uniquely e-enable</li>
  <li>team driven benefits</li>
  <li>rather than exceptional</li>
  <li>architectures Continually</li>
  <li>foster cutting-edge</li>
  <li>open-source core</li>
  <li>process-centric</li>
</ul>

</div>

Answer 1

将内容安排到可预测的列中，每列五个元素，似乎是 display: grid 的工作:

ul {
  /* set the layout to grid: */
  display: grid;
  /* define the number of rows you
     require: */
  grid-template-rows: repeat(5, 1fr);
  /* set the flow of the grid to follow
     a columnar layout: */
  grid-auto-flow: column;
}

<div>
  <ul>
    <li>Assertively mesh</li>
    <li>client-centered</li>
    <li>niches and covalent networks</li>
    <li>Uniquely e-enable</li>
    <li>team driven benefits</li>
    <li>rather than exceptional</li>
    <li>architectures Continually</li>
    <li>foster cutting-edge</li>
    <li>open-source core</li>
    <li>process-centric</li>
  </ul>

</div>

JS Fiddle demo .

不过，如果你真的想使用 flex-box，你可以:

*,
 ::before,
 ::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  /* Use the flexbox layout: */
  display: flex;
  /* set the content direction to
     columns: */
  flex-direction: column;
  /* let the contents wrap to
     new columns once the
     boundaries of the element are
     reached: */
  flex-wrap: wrap;
  /* set the height of the containing
     element, in order for the wrapping
     to occur: */
  height: 10em;
  /* entirely irrelevant: */
  list-style: none;
  max-width:500px;
}

li {
  /* set the height of the individual
     'rows' to be 20% of the total height
     of the parent, to enforce the five-
     items per 'column': */
  height: 2em;
  line-height: 2em;
  width: 45%;
}

/* Irrelevant, but allows 'column-headings'
   to be styled: */
li:nth-child(5n + 1) {
  font-weight: bold;
  border-bottom: 1px solid #000;
}

<div>
  <ul>
    <li>Assertively mesh</li>
    <li>client-centered</li>
    <li>niches and covalent networks</li>
    <li>Uniquely e-enable</li>
    <li>team driven benefits</li>
    <li>rather than exceptional</li>
    <li>architectures Continually</li>
    <li>foster cutting-edge</li>
    <li>open-source core</li>
    <li>process-centric</li>
  </ul>
</div>

JS Fiddle demo .