flex css - 在一定高度後剪輯元素而不是換行

Question

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

我希望第 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;
}

###

Answer 1

將 Flex 容器稱為「元素」有點令人困惑。我個人更喜歡稱它們為“blabla-container”，其中“blabla”是我在該部分中使用的水（例如：“nav-links-container”。但這當然只是一個品味問題。< /p>

關於這個問題，感謝您提供新信息，如果您願意接受建議，最簡單的方法是使用 css-grid：

#example-element {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* or this way: 
    grid-template-columns: auto auto auto;
    */   
    overflow-x: hidden !important;
}

您可以在此處找到更多詳細資訊：MDN文檔，css-grid

啊，還有一個細節，即您所說的“剪輯”，當父容器不夠大，無法容納固定大小的子容器時，就會發生這種情況，因此，如果在應用此更改後，您看不到它的行為與第二個容器相同圖片，只需將父組件變小（例如200px）即可！