수평 시리즈에서 겹치는 Flex 항목을 얻는 방법은 무엇입니까?

Flex 항목을 겹치게 만드는 방법은 무엇입니까?

과제:
가로 방향으로 일련의 카드를 서로 겹칠 수 있도록 표시하세요. 주어진 너비에 맞추기에는 카드가 너무 많습니다.

해결책:

Flexbox를 활용하면 오버플로 제어 컨테이너에 포장하여 겹치는 카드를 만들 수 있습니다.

<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에 Overflow:hidden을 설정했습니다. 이렇게 하면 마지막 카드를 제외한 모든 카드가 컨테이너 아래에 숨겨집니다.
• min-width는 카드가 너무 좁아지거나 사라지는 것을 방지합니다.
• align-content: center는 컨테이너 내에서 카드를 수직으로 정렬합니다.

위 내용은 수평 시리즈에서 겹치는 Flex 항목을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!