Elemente von oben nach unten statt von links nach rechts anordnen (float: down?)

Leser Marcin A schrieb uns mit dieser Frage zu einer einfachen ungeordneten Liste, bei der die Elemente vertikal (von oben nach unten) statt horizontal (von links nach rechts) angeordnet sein sollten.

Also Markup wie

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

Was dann so aussehen würde

1 4
2 5
3 6

Nun, Marcin, leider gibt es hier kein float: down;, das Sie vielleicht möchten. Es gibt eine Reihe von Möglichkeiten, aber wie Sie vielleicht vermuten, haben alle ihre Vorbehalte.

Absolute Positionierung

Wenn Sie wissen, dass Sie das Layout genau wie in diesem Textdiagramm haben möchten und die genaue Breite und Höhe jedes Elements kennen, können Sie sie einfacher absolut positionieren. Das sind viele Wenns, aber es kann der Fall sein, wenn es sich hauptsächlich um eine Reihe von Bildern handelt.

Siehe den Pen gasif von Chris Coyier (@chriscoyier) auf CodePen

Noah Blon hat eine automatisierte Sass-basierte Version, um dies für eine beliebige Anzahl von Listenelementen zu erleichtern.

Siehe den Pen Vertikal ausgerichtete Liste in 2 Spalten – IE9+ von Noah Blon (@noahblon) auf CodePen

Flexbox-Spalten

Flexbox wurde für solche Dinge entwickelt. Sie können die ungeordnete Liste als Flex-Container mit Spaltenausrichtung verwenden und Umbrüche zulassen. Im Wesentlichen

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

Um das Layout genau abzugleichen, werde ich dem Flex-Container eine Breite und Höhe zuweisen. Wenn Sie keine Breite haben, ist jede Spalte so breit wie nötig, um den Container zu füllen. Wenn Sie keine Höhe haben, werden die Elemente nicht umbrochen.

Siehe den Pen yHoeI von Chris Coyier (@chriscoyier) auf CodePen

Zur Erinnerung: Sie möchten hier die Syntax mischen, um die beste Unterstützung zu erzielen.

Der Vorteil hierbei ist, dass die Elemente beliebig groß sein können und das Verhalten beibehalten wird. Der Nachteil ist nur IE 10+.

Textspalten

Eine weitere Möglichkeit ist, die Elemente als Inline-Block zu gestalten und CSS3-Textspalten zu verwenden. Im Wesentlichen

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

Jeder Block verhält sich wie normaler Text, er füllt die Spalte vertikal, bevor er zur nächsten übergeht.

Siehe den Pen oFyEH von Chris Coyier (@chriscoyier) auf CodePen

Textspalten werden gleichmäßig über die Breite des Containers verteilt. Wenn Sie also sehr spezifisch bezüglich der Spaltenbreiten sein möchten, müssen Sie die Breite des Containers genau festlegen.

Ein Unterschied zu Flexbox ist, dass versucht wird, die Elemente so gut wie möglich gleichmäßig auf die Spalten zu verteilen. Sie müssen also keine Höhe angeben, wenn Sie nicht wollen. Im Wesentlichen wird versucht, es so kurz wie möglich zu machen.

Bringen Sie Ihre eigenen Präfixe mit, und wieder auch IE 10+.

Haben Sie eine andere Methode?

Lassen Sie es uns hören! CSS macht Spaß. Vielleicht Grid Layout in der Zukunft?