Organizar elementos de arriba a abajo en lugar de izquierda a derecha (flotante: ¿hacia abajo?) | Programar Plus

El lector Marcin A escribió con esta pregunta sobre una lista desordenada simple en la que querían que los elementos se organizaran en orden vertical (de arriba a abajo) en lugar de horizontal (de izquierda a derecha).

Así que marca como:

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
</ul>

Que terminaría como:

1 4
2 5
3 6

Bueno Marcin, lamentablemente no hay float: down; que podrías querer aquí. Hay varias formas, pero como puede sospechar, hay advertencias con todas ellas.

Posicionamiento absoluto

Si sabe que desea el diseño exactamente como ese diagrama de texto y conoce el ancho y la altura exactos de cada elemento, puede colocarlos absolutamente más fácilmente en ese diseño. Son muchos condicionantes, pero podría ser el caso si se trata principalmente de un conjunto de imágenes.

Vea el Pen gasif de Chris Coyier (@chriscoyier) en CodePen

Noah Blon tiene una versión automatizada basada en Sass para facilitar una cantidad arbitraria de elementos de la lista.

Vea la lista de Pen con orientación vertical en 2 columnas: IE9+ de Noah Blon (@noahblon) en CodePen

Columnas Flexbox

Flexbox fue hecho para este tipo de cosas. Puede hacer que la lista desordenada sea un contenedor flexible con una dirección de columna y permitir el ajuste. Esencialmente:

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Para que coincida exactamente con el diseño, voy a aplicar un ancho y una altura al contenedor flexible. Si no tiene un ancho, cada columna tendrá el ancho necesario para que llenen el contenedor. Si no tiene una altura, los artículos no se envolverán.

Vea el Pen yHoeI de Chris Coyier (@chriscoyier) en CodePen

Recuerde que querrá mezclar sintaxis aquí para obtener el mejor soporte.

La ventaja aquí es que los elementos pueden ser de cualquier tamaño y el comportamiento se mantendrá. La desventaja es IE 10+ solamente.

Columnas de texto

Otra posibilidad aquí es hacer que los elementos se bloqueen en línea y usar columnas de texto CSS3. Esencialmente:

ul {
  column-count: 2;
  column-gap: 0;
}
li {
  display: inline-block;
}

Cada bloque se comportará como texto regular, llenará la columna verticalmente antes de pasar al siguiente.

Vea el Pen ofFyEH de Chris Coyier (@chriscoyier) en CodePen

Las columnas de texto se dividen uniformemente a lo largo del ancho del contenedor, por lo que si desea ser muy específico sobre el ancho de las columnas, tendrá que ser específico sobre el ancho del contenedor.

Una diferencia entre esto y flexbox es que intentará dividir los elementos en las columnas por igual lo mejor que pueda. Por lo tanto, no necesita declarar una altura si no lo desea. Esencialmente trata de hacerlo lo más corto posible.

Traiga sus propios prefijos y también IE 10+ nuevamente.

¿Tienes otra manera?

¡Vamos a oírlo! CSS es divertido. ¿Quizás el diseño de cuadrícula en el futuro?

(Visited 2 times, 1 visits today)