Wenn Sie die Liste mit Flex auflisten, sieht sie ungefähr so aus.

12
34
56

Wie kann ich das in Flex so arrangieren? Gibt es eine Möglichkeit, dies zu tun?

14
25
36

Übrigens im Falle einer Erhöhung auf sieben

15
26
37
4

Es ist wie ein Gefühl.

.list_number {
  display: flex;
  flex-wrap: wrap;
}
.list_number > li {
  width: 50%
}
<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
1
user10937947 19 Jän. 2019 im 18:57

3 Antworten

Beste Antwort

Es gibt viele Möglichkeiten, wie Sie dies erreichen können, aber wie @TemaniAfif in den Kommentaren erwähnt, besteht die einfachste Methode darin, Spalten wie diese zu verwenden:

ul{
    columns: 2;
 }

Fügen Sie das einfach zu Ihrem CSS hinzu und Sie können dasselbe mit nur einer Codezeile erreichen.

Hoffe das hilft.

2
AndrewL64 19 Jän. 2019 im 17:46

flex-direction: column und max-height sollten den Trick machen.

0
Benjamin 19 Jän. 2019 im 16:22

Wenn Sie für einen JavaScript-Ansatz offen sind, können Sie einfach die Höhe eines <li> -Elements abrufen (vorausgesetzt, alle <li> -Elemente haben dieselbe Höhe) und mit der halben Anzahl von {{X2 multiplizieren }} in Ihrem <ul> Element und setzen Sie die Höhe der ul auf diesen Wert. ( Wenn die Zahl von <li>'s eine ungerade Zahl ist, fügen Sie dem Wert einfach die Höhe von einer weiteren <li> hinzu. )

Stellen Sie außerdem sicher, dass der übergeordnete Flex-Container .list_number die Eigenschaften flex-direction: column; und flex-wrap: wrap; hat, damit Elemente automatisch in die nächste Spalte verschoben werden, wenn vorherige Elemente die Höhe gefüllt haben.


Überprüfen Sie das Code-Snippet unten und führen Sie es aus, um ein praktisches Beispiel für das zu finden, was ich oben beschrieben habe:

/* JavaScript */
const div = document.querySelector(".list_number");
const lists = document.querySelectorAll(".list_number li");
const height = window.getComputedStyle(lists[0]).height;

div.style.height = (lists.length % 2 == 0) ? (parseInt(height) * lists.length / 2) + "px" : (parseInt(height) * lists.length / 2) + parseInt(height) + "px";
/* CSS */

html, body {width: 100%; height: 100%; margin: 0px; padding: 0px;}

.list_number{
  list-style: none;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
<!-- HTML -->

<ul class="list_number">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
0
AndrewL64 19 Jän. 2019 im 17:34