Flexbox/Float - 2 1 2 Layout

Question

Ich versuche, ein 2 1 2 Layout mit Flexbox oder Floats zu erstellen, wie im Bild zu dieser Frage zu sehen. Gibt es eine Möglichkeit, dies erfolgreich mit nur einer geordneten Liste von Elementen zu tun?

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

1,2,4,5 sind gleich in der Größe und 3 ist die gleiche Breite wie die anderen Blöcke.

Ich versuche, dies mit Flexbox zu erreichen, aber ich kann nicht die 2 unter 1 und 5 unter 4.

Answer 1

scheinen, Sie dies tun könnte mit flex-direction: column und flex-wrap: wrap aber ich denke, Sie feste Höhe einstellen müssen auf Eltern

body, html, ul { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
ul { 
 
    display: flex; 
 
    height: 100vh; 
 
    list-style-type: none; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
} 
 
li { 
 
    flex: 0 0 50%; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    font-size: 50px; 
 
} 
 
li:nth-child(3) { 
 
    flex: 0 0 100%; 
 
}

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