如何在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

将内容安排在可预测的列中，这五个项目中的每一个似乎都是library(filematrix) fm = fm.open('matrix_file') show(fm[1:3,1:3]) close(fm) 的工作：

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;
}

JS Fiddle demo。

尽管，如果您真的想使用flex-box，可以可以：

<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>

*,
 ::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;
}

JS Fiddle demo。

Answer 2

我将为此使用CSS列：

ul {columns: 2;}
li {list-style-position: inside;}

<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>

请注意，“显示：网格”具有pretty bad browser support，而列（和弹性框）具有score better。