겹치는 Flex 항목을 달성하는 방법: 축소 요소를 극복하고 우아한 겹침을 구현합니까?

Flex 항목 겹치기

Flexbox를 사용하여 가로로 겹치는 일련의 요소를 만드는 것은 요소의 크기가 줄어들 수 있으므로 어려울 수 있습니다. . 문제를 자세히 조사하고 해결책을 찾아보겠습니다.

아래 제공된 예는 문제를 보여줍니다.

<code class="css">.cards {
  display: flex;
  max-width: 300px;
}

.card {
  width: 50px;
  height: 90px;
  border: 1px solid black;
  border-radius: 3px;
  background-color: rgba(255, 0, 0, 0.4);
}</code>

<code class="html"><div class='cards'>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
  <div class='card'></div>
</div></code>

이 예에서는 카드가 최대 너비에 맞게 축소됩니다. 제약으로 인해 원하지 않는 결과가 발생합니다. 이 문제를 해결하려면 수정된 접근 방식을 채택해 보겠습니다.

<code class="css">.cards {
  display: flex;
  align-content: center;
  max-width: 35em;
}

.cardWrapper {
  overflow: hidden;
}

.cardWrapper:last-child, .cardWrapper:hover {
    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;
}</code>

<code class="html"><div class="cards">
  <div class="cardWrapper">
    <div class="card">card 1 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 2 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 3 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 4 blah blah blah</div>
  </div>
  <div class="cardWrapper">
    <div class="card">card 5 blah blah blah</div>
  </div>
</div></code>

이 수정된 솔루션에서는 각 카드 주위에 래퍼(cardWrapper)를 도입합니다. 래퍼는 컨테이너 역할을 하며 해당 콘텐츠의 오버플로 동작을 제어합니다. 기본적으로 래퍼는 숨겨져 있지만 마지막 래퍼와 마우스를 올려 놓은 모든 래퍼가 표시되므로 필요한 경우 카드가 겹칠 수 있습니다. 이 접근 방식을 사용하면 카드가 원하는 크기를 유지하고 우아하게 겹쳐질 수 있습니다.

위 내용은 겹치는 Flex 항목을 달성하는 방법: 축소 요소를 극복하고 우아한 겹침을 구현합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!