响应式布局适配求助：Flexbox实现Tile组件自适应及移动端垂直排列问题

Got it, let's get this tile layout working exactly how you want it! Flexbox is perfect for this scenario—you just needed a few tweaks to your CSS to handle both desktop and mobile views. Let's break this down step by step.

First, Let's Refactor the CSS #

Here's the complete CSS solution that will make your tiles responsive, adjust to window sizes, and stack vertically on mobile:

/* Reset default box model to avoid layout surprises */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Main tiles container - flex to arrange the big tile and side tiles */
.tiles {
  display: flex;
  gap: 1.5rem; /* Adds consistent spacing between tiles */
  padding: 1.5rem;
  flex-wrap: wrap; /* Prevents overflow on smaller desktop screens before the mobile breakpoint */
}

/* Left big tile - takes more space than the side tiles */
.first-tile {
  flex: 2; /* Ratio: takes 2 parts of available space */
  min-width: 320px; /* Ensures it doesn't shrink too much on narrow screens */
  display: flex;
  flex-direction: column; /* Stacks image and content vertically inside */
  border: 1px solid #eee; /* Optional: adds visual boundary */
  border-radius: 8px;
  overflow: hidden; /* Clips image to tile border radius */
}

/* Side tiles container - stacks its two tiles vertically */
.side-tiles {
  flex: 1; /* Ratio: takes 1 part of available space */
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* Spacing between the two small tiles */
  min-width: 280px; /* Prevents too-narrow side tiles */
}

/* Style for individual small tiles */
.second-tile, .third-tile {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 1.5rem;
}

/* Tile image styling - ensures it scales correctly */
.tile-img img {
  width: 100%;
  height: auto;
  object-fit: cover; /* Optional: crops image to fill space without distortion */
}

/* Tile content padding - adds breathing room */
.tile-content {
  padding: 1.5rem;
}

/* Mobile breakpoint: switch to vertical stacking */
@media (max-width: 768px) {
  .tiles {
    flex-direction: column; /* All tiles stack top to bottom */
  }
  
  /* No need to change .side-tiles direction here—it's already column, so the two small tiles stay stacked */
}

Why This Works #

• Flex Ratios: Using flex: 2 and flex: 1 ensures the big tile takes twice as much space as the side tile container on desktop, keeping the layout balanced.
• Min-Widths: These prevent tiles from shrinking to unreadable sizes when the window gets narrow (before hitting the mobile breakpoint).
• Gap Property: Replaces margin hacks to add consistent spacing between tiles—cleaner and easier to maintain.
• Mobile Media Query: Switching .tiles to flex-direction: column makes all tiles stack vertically on screens smaller than 768px (adjust this breakpoint to fit your needs).

Common Issues You Might Have Faced #

• Forgetting to set display: flex on the .side-tiles container (so the two small tiles didn't stack vertically on desktop).
• Not adding min-width values, leading to tiles shrinking too much or overflowing.
• Missing the media query to switch the main container's flex direction for mobile.

Give this CSS a try, and you should see your tiles adapt smoothly to any screen size!

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