테두리는 정적 높이와 너비를 나타냅니다.

그림과 같이 세 번째로 포장하는 대신 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;
}