响应式三列Flex可点击容器开发需求（含移动端适配与指定子项隐藏）

Alright, let's get this Flex container sorted out exactly how you need it. I'll walk you through adjusting your HTML and CSS to hit all your requirements—3 columns on desktop, single column on mobile, and hiding the last 4 items on small screens.

Updated HTML Structure #

First, we'll restructure the layout to support 3 columns on desktop, and add a special class (hidden-on-mobile) to the last 4 clickable items so we can target them for mobile hiding:

<div class="myflex-container">
  <!-- Column 1 -->
  <div class="myflex-column">
    <a href="#" class="clickable-card">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="London" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">London</h5>
      </div>
    </a>
    <a href="#" class="clickable-card">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/jPGPiJN.jpg" alt="Paris" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Paris</h5>
      </div>
    </a>
    <a href="#" class="clickable-card">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/HYZ1Ci5.jpg" alt="Frankfurt" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Frankfurt</h5>
      </div>
    </a>
  </div>

  <!-- Column 2 -->
  <div class="myflex-column">
    <a href="#" class="clickable-card">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Chicago</h5>
      </div>
    </a>
    <a href="#" class="clickable-card">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="New York" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">New York</h5>
      </div>
    </a>
    <!-- Start of items to hide on mobile -->
    <a href="#" class="clickable-card hidden-on-mobile">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Geneva" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Geneva</h5>
      </div>
    </a>
    <a href="#" class="clickable-card hidden-on-mobile">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/GmtzHkT.jpg" alt="Chicago" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Chicago</h5>
      </div>
    </a>
  </div>

  <!-- Column 3 -->
  <div class="myflex-column">
    <a href="#" class="clickable-card hidden-on-mobile">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/0MAl65z.jpg" alt="New York" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">New York</h5>
      </div>
    </a>
    <a href="#" class="clickable-card hidden-on-mobile">
      <div class="myprod-image">
        <img class="imgoxauto" src="https://i.imgur.com/GLLQ3VQ.jpg" alt="Geneva" />
      </div>
      <div class="myprod-description">
        <h5 class="texth5 myprod-name">Geneva</h5>
      </div>
    </a>
  </div>
</div>

Updated CSS with Responsive Rules #

Next, we'll adjust the CSS to handle the 3-column desktop layout, mobile single-column switch, and hide the targeted items on small screens:

/* Base Flex Container Styles */
.myflex-container {
  display: flex;
  flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
  gap: 15px; /* Space between columns */
  font-size: 20px;
  text-align: center;
}

/* Desktop 3-Column Layout */
.myflex-column {
  flex: 1 1 30%; /* Each column takes ~30% width, grows/shrinks as needed */
}

/* Clickable Card Styles (left image, right text) */
.clickable-card {
  display: flex;
  align-items: center;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  margin-bottom: 10px;
  text-decoration: none; /* Remove link underline */
  color: inherit; /* Keep text color consistent */
}

.myprod-image {
  height: 74px;
  margin-right: 10px;
}

img.imgoxauto {
  height: 100%;
  width: 74px;
  object-fit: cover; /* Ensure image scales properly */
}

h5.texth5.myprod-name {
  padding-bottom: 0;
  margin: 0;
}

/* Mobile Responsive Rules (≤800px) */
@media (max-width: 800px) {
  .myflex-column {
    flex: 1 1 100%; /* Switch to single column */
  }

  /* Hide the last 4 items on mobile */
  .hidden-on-mobile {
    display: none;
  }
}

Key Changes Breakdown #

• 3-Column Desktop Layout: We used flex-wrap: wrap on the container and set each column to flex: 1 1 30%—this ensures 3 equal-width columns with space between them, even if the screen resizes slightly.
• Mobile Single Column: The media query overrides the column width to 100%, forcing a single stacked layout.
• Hide Last 4 Items: The hidden-on-mobile class is added to the final 4 cards, and we toggle display: none for that class in the mobile media query.
• Card Clickability: We moved the display: flex and align-items: center directly to the clickable-card class to ensure the entire card is clickable and the image/text align properly.

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