How to Achieve Overlapping Flex Items in a Horizontal Series?-CSS Tutorial-php.cn

How to Achieve Overlapping Flex Items in a Horizontal Series?

Patricia Arquette

Release： 2024-10-29 18:11:57

Original

363 people have browsed it

How to Achieve Overlapping Flex Items in a Horizontal Series?

How to Make Flex Items Overlap?

Challenge:
Display a horizontal series of cards that can overlap each other, even if there are too many to fit within the given width.

Solution:

Utilizing Flexbox, we can create overlapping cards by wrapping them in an overflow-controlled container:

<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>

Copy after login

<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>

Copy after login

Explanation:

We set overflow: hidden on each .cardWrapper, except for the last one and those on hover. This ensures all except the last card are hidden under the container.
min-width prevents cards from becoming too narrow and disappearing.
align-content: center aligns the cards vertically within the container.

The above is the detailed content of How to Achieve Overlapping Flex Items in a Horizontal Series?. For more information, please follow other related articles on the PHP Chinese website!