フレックスボックス/フロート - 2 1 2レイアウト

Question

私はこの質問に追加された画像に見られるように、Flexboxまたは浮動小数点数を使って2 1 2レイアウトを作成しようとしています。順序付きアイテムリストを使用してこれを正常に実行する方法はありますか？

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

1,2,4,5-サイズが同じであり、図3は、他のブロックと同じ幅です。

私はこの使用してフレキシボックスを達成しようとしているが、私はあなたがflex-direction: columnとflex-wrap: wrapでこれを行うことができます4.

Answer 1

の下に1と5の下2を得るように見えることはできませんが、私はあなたが固定の高さを設定する必要がありますだと思います親の

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>