가로 행에 겹치는 Flex 항목을 만드는 방법은 무엇입니까?

겹치는 Flex 항목 만들기

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

Flexbox 접근 방식

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

.cards {<br> 디스플레이: flex;<br> align-content: center;<br> max- 너비: 35em;<br>}</p>
<p>.cardWrapper {<br> 오버플로: 숨겨진;<br>}</p>
<p>.cardWrapper:last-child, .cardWrapper:hover {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">overflow: visible;

로그인 후 복사

}

.card {

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 항목에서 오버플로를 숨깁니다.

위 내용은 가로 행에 겹치는 Flex 항목을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!