css - navegacion - menu horizontal html5

¿Cómo puedo crear múltiples columnas a partir de una sola lista desordenada?

Question

Me gustaría crear una lista de varias columnas como esta: https://jsfiddle.net/37dfwf4u/

No hay problema cuando se usa una lista diferente para cada columna:

<ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
</ul>
<ul>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
</ul>

ul {
    display:inline-block;
}

Sin embargo, ¿se puede hacer esto mediante una lista continua y CSS puro para que el CSS organice las columnas automáticamente? Por ejemplo, mediante el uso de un diseño flexible con el que todavía no estoy familiarizado.

Answer 1

Considere el uso de CSS3 Multi-column Layout para eso:

Columnas múltiples CSS3

Puede hacerlo usando solo una lista y definir el número de columnas con CSS. Si comprueba la compatibilidad con el navegador de diseño de varias columnas de CSS3 aquí , puede ver el soporte parcial de la mayoría de los navegadores, ya que no son compatibles con las propiedades break-before, break-after y break-inside. Pero sí admiten las propiedades que necesitará para crear una lista de varias columnas con un prefijo.

.container {
  -webkit-column-count: 2; /* Chrome, Safari, Opera */
  -moz-column-count: 2; /* Firefox */
  column-count: 2;
}

ul {
  margin: 0;
}

<div class="container">
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
    <li>item4</li>
    <li>item5</li>
    <li>item6</li>
    <li>item7</li>
    <li>item8</li>
  </ul>
</div>

Answer 2

Sí, si haces el contenedor ul a flex, limita su altura, cambia la dirección a la columna y deja que se enrolle:

ul {
height: 100px;
display:flex;
flex-direction: column;
flex-wrap: wrap;
}

<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
<style></style>