使用Flexbox创建响应式图片布局遇适配问题求助

Hey there! I see the issue with your Flexbox layout—it looks perfect at full size, but falls apart when you shrink the window. Let's break down what's going wrong and fix it step by step.

What's Causing the Problem? #

Right now, your main .my-container doesn't have flex-wrap: wrap enabled. That means when the window narrows to the point where your left (59.4%) and right (35%) containers can't fit side by side, they won't wrap onto a new line—instead, they'll overflow or get squished into unreadable sizes. Also, using fixed percentage widths without a minimum width threshold means your images can get too tiny on mobile screens.

The Solution #

Here's the updated CSS that will make your layout fully responsive:

.my-container {
  margin: 0 auto;
  height: auto;
  max-width: 70%;
  display: flex;
  flex-wrap: wrap; /* Critical: Lets containers wrap when space runs out */
  gap: 2%; /* Optional: Adds clean space between left/right containers */
}

.left-flex-container {
  flex: 2; /* Allocates more relative space to the left container */
  min-width: 300px; /* Prevents it from shrinking below a readable size */
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2%; /* Optional: Adds space between the left-side images */
}

.right-flex-container {
  flex: 1; /* Allocates less relative space to the right container */
  min-width: 300px; /* Prevents it from shrinking too much */
  height: auto;
}

div.left-flex-container>img, 
div.right-flex-container>img {
  max-width: 100%;
  height: auto;
  border: 1px solid #000;
  margin-bottom: 2%; /* Optional: Adds space below each image */
}

/* Optional: Make the two small left images fill their row evenly */
.left-flex-container img:nth-child(2),
.left-flex-container img:nth-child(3) {
  flex: 1;
  min-width: 140px; /* Keeps these small images from getting too narrow */
}

What Changed & Why? #

• flex-wrap: wrap on .my-container: This tells the flex items (left and right containers) to move to a new line when horizontal space is insufficient—no more overflow or squishing.
• flex properties instead of fixed widths: This lets containers automatically adjust their width based on available space, with the left container taking twice as much space as the right (you can tweak the flex values to adjust this ratio).
• min-width on both containers: Ensures they don't shrink below a readable size, triggering the wrap behavior instead of collapsing into tiny, unviewable elements.
• Optional spacing rules: gap and margin-bottom improve the visual flow of your layout, making it look cleaner at all screen sizes.
• Small left image adjustment: Forces the two smaller images on the left to split their row's space evenly, while keeping a minimum width to stay readable.

With these tweaks, your layout will adjust smoothly as you resize the window: on desktop, left and right containers stay side by side; on mobile, they stack vertically. Your images will always scale properly to fit their containers without breaking the design.

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