求助：基于Flex实现视频与图片的自适应马赛克布局

Hey there! The issue you're running into is likely that your flex tiles don't have the right combination of flex properties and aspect ratio rules to maintain uniform size while adapting to the container. Let's fix that with a straightforward approach:

Step 1: Update the Flex Container #

First, let's tweak your container to handle spacing and overflow better:

.flex-container {
  display: flex;
  background-color: Green;
  flex-wrap: wrap;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  gap: 10px; /* Adds consistent space between tiles (optional but recommended) */
  padding: 10px; /* Prevents tiles from touching the container edges */
  overflow-y: auto; /* Lets users scroll if tiles exceed the viewport height */
  align-content: flex-start; /* Keeps tiles aligned to the top instead of stretching vertically */
}

Step 2: Style the Tiles for Uniform Size #

This is the key part. We'll use flex properties to make tiles adapt to the container width while keeping their width and height identical:

.flex-tile {
  /* Flex properties: grow to fill space, shrink if needed, base size of 200px */
  flex: 1 1 200px;
  /* Ensures width = height (adjust to 16/9 for video aspect ratio if needed) */
  aspect-ratio: 1/1;
  /* Minimum width before tiles wrap to a new row */
  min-width: 150px;
  /* Optional: Maximum width to prevent tiles from getting too large */
  max-width: 300px;
  background-color: #eee; /* Placeholder background */
}

Step 3: Make Media (Images/Videos) Fit Correctly #

If you're adding images or videos inside the tiles, ensure they fill the tile without stretching or distorting:

/* For images */
.flex-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Crops to fill the tile (use "contain" to keep full media visible) */
  display: block; /* Removes extra space below the image */
}

/* For videos */
.flex-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

How This Works #

• flex: 1 1 200px: Tiles will try to be 200px wide, but grow equally to fill any extra space in a row, or shrink down to min-width when the container is too narrow. This ensures every tile in a row has the same width.
• aspect-ratio: 1/1: Forces each tile to stay square (width = height). If you need a video-friendly 16:9 ratio, change this to 16/9.
• gap and padding: Clean up spacing without needing extra margins on tiles.
• overflow-y: auto: Prevents tiles from being cut off if there are too many to fit in the viewport.

Now when you add new tiles, they'll automatically wrap into the next row, and all tiles will maintain the same size across the entire layout.

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