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"). 하지만 이것은 물론 취향의 문제입니다. 이 질문과 관련하여 새로운 정보를 제공해 주셔서 감사합니다. 제안 사항이 있는 경우 가장 쉬운 방법은 CSS-grid를 사용하는 것입니다.

으아아아

자세한 내용은 여기에서 확인할 수 있습니다:

MDN 문서, css-grid

아, 한 가지 더 자세히 설명하자면, "클리핑"이라고 부르는 것은 상위 컨테이너가 고정된 크기의 하위 컨테이너를 수용할 만큼 충분히 크지 않을 때 발생합니다. 따라서 이 변경 사항을 적용한 후 두 번째 컨테이너와 동일하게 작동하는 대신 이미지의 경우 상위 구성 요소를 더 작게 만드세요(예: 200px)!