겹치는 Flex 항목 만들기

사용 가능한 너비를 초과할 수 있는 Flex 항목의 가로 행을 만들 때 겹치는 것이 바람직한 경우가 많습니다. . 기본적으로 Flexbox는 컨테이너에 맞게 항목을 축소합니다.

Flexbox 접근 방식

겹침을 달성하려면 다음 접근 방식을 활용할 수 있습니다.

overflow: visible;

width: 10em;
min-width: 10em;
height: 6em;
border-radius: 0.5em;
border: solid #666 1px;
background-color: #ccc;
padding: 0.25em;

display: flex;
flex-direction: column;
justify-content: center;
align-items: center;

• 각 플렉스 항목을 .cardWrapper div로 래핑합니다.
• 기본적으로 .cardWrapper가 Overflow: Hidden을 갖도록 설정합니다. 이렇게 하면 하위 .card에서 오버플로가 숨겨집니다.
• 마지막 항목이나 마우스로 가리킨 항목이 오버플로를 표시할 수 있도록 하려면 :last-child 또는 :hover를 사용하세요.
• .card 항목을 다음으로 설정하세요. 축소되는 것을 방지하기 위해 고정 너비와 최소 너비를 가집니다.
• overflow:hidden을 사용하여 .card 항목에서 오버플로를 숨깁니다.