CSS hover翻转卡片无法横向排列问题求助

Hey there! Let's get those flip cards lined up side-by-side instead of stacking vertically—no more endless scrolling needed. Here's what's going wrong and how to fix it quickly:

The Problem #

Your .flip-container elements are block-level elements by default, which means each one takes up the full width of its parent container and stacks on top of the next. That's why you're seeing them vertically instead of horizontally.

The Solution: Use Flexbox (Responsive & Easy) #

We'll wrap all your flip cards in a parent container and use Flexbox to handle the horizontal layout. This also makes the design responsive—cards will wrap to new rows on smaller screens instead of overflowing.

Step 1: Update Your HTML #

Wrap all three .flip-container elements in a new container with the class cards-container:

<div class="cards-container">
  <!-- First Flip Card -->
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <p class="title3">Certifications<sub>+</sub></p>
      </div>
      <div class="back">
        <p class="title3">Certifications</p>
        <p class="text">
          <ul>
            <li>SDA Certified</li>
            <li>ETA Customer Service Specialist</li>
            <li>ICT Spreadsheet Essentials</li>
            <li>ICT CyberSecurity Essentials</li>
            <li>FERPA 101 for Local Education Agencies</li>
            <li>FERPA 201: Data Sharing</li>
            <li>FERPA for Colleges and Universities</li>
            <li>GCN Secl...</li>
          </ul>
        </p>
      </div>
    </div>
  </div>

  <!-- Second Flip Card -->
  <div class="flip-container">
    <!-- Your second card content here -->
  </div>

  <!-- Third Flip Card -->
  <div class="flip-container">
    <!-- Your third card content here -->
  </div>
</div>

Step 2: Adjust Your CSS #

Add the new container styles and tweak the flip card width to be responsive:

/* New: Parent container for horizontal layout */
.cards-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* Space between cards (adjust as needed) */
  padding: 1rem; /* Prevent cards from touching screen edges */
}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  /* Make cards responsive: grow/shrink, min width 300px for readability */
  flex: 1 1 300px;
  /* Optional: For fixed equal widths (3 cards per row) */
  /* width: calc(33.333% - 0.666rem); */
}

/* flip the pane when hovered */
.flip-container:hover .flipper, .flip-container.hover .flipper {
  transform: rotateY(180deg);
}

/* Remove fixed width here—let flexbox handle it */
.flip-container, .front, .back {
  height: 480px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
  width: 100%; /* Ensure flipper fills the container */
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* Make front/back panels fill the flipper */
}

/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}

What Each Change Does #

• display: flex on .cards-container: Forces flip cards to line up horizontally.
• flex-wrap: wrap: Makes cards wrap to new rows when the screen is too narrow (no horizontal scrolling!).
• flex: 1 1 300px: Lets cards grow/shrink to fit the container, but never get smaller than 300px (so content stays readable on mobile).
• width: 100% on .flipper, .front, and .back: Ensures all card elements inherit the responsive width of the container instead of using a fixed 350px.

Test this out, and your cards should now line up horizontally across the page, wrap neatly on smaller screens, and keep their hover flip effect intact!

内容的提问来源于stack exchange，提问作者mrjodicow