邊框代表靜態高度和寬度。

我希望第 5 項和第 6 項保留在第二行，並剪掉第 3 項和第 6 項，而不是如圖所示第三次包裹。我如何透過 Flex 實現這一目標？

為了補充這個問題，容器的寬度（用邊框顯示）可以透過使用者操作調整大小。當它很寬時。例如，如果它的寬度足以容納 4 個元素，則它將在第一行中顯示所有 4 個元素，而在第二行中顯示其餘的元素。

當我們折疊容器的寬度時，我希望它最多有2行，如下圖所示。

我希望結果看起來像這樣以便視覺化：

[]

https://codepen.io/akeni/pen/LYBGOXB

<div id="example-element" class="transition-all" style="flex-wrap: wrap;">
        <div>Item One</div>
        <div>Item Two</div>
        <div>Item Three</div>
        <div>Item Four</div>
        <div>Item Five</div>
        <div>Item Six</div>
</div>


#example-element {
    border: 1px solid #c5c5c5;
    width: 300px;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

#example-element > div {
    background-color: rgba(0,0,255,.2);
    border: 3px solid #00f;
    width: 60px;
    margin: 10px;
}