如何用CSS Flex实现React中动态子元素自适应父容器

布局逻辑 #

根据图片数量动态调整布局：

• 1张图片：占满容器宽度，设置较高的最小高度
• 2张图片：平分容器宽度，中等高度
• 3张图片：左侧单张占50%宽度并填满高度，右侧两张各占50%宽度、平分高度
• 4张及以上：每行两张，各占50%宽度，统一最小高度

实现代码 #

React 组件

import React from 'react';
import './ImageGallery.css';

const ImageGallery = ({ images }) => {
  const getContainerClass = () => {
    switch (images.length) {
      case 1: return 'single';
      case 2: return 'double';
      case 3: return 'triple';
      default: return 'multiple';
    }
  };

  return (
    <div className={`image-container ${getContainerClass()}`}>
      {images.map((img, index) => (
        <img
          key={index}
          src={img.src}
          alt={img.alt || `Image ${index + 1}`}
          className="image-item"
        />
      ))}
    </div>
  );
};

export default ImageGallery;

CSS 样式

.image-container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px; /* 图片间距，可按需调整 */
}

.image-item {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例填充容器 */
  border-radius: 4px; /* 可选圆角效果 */
}

/* 单张图片布局 */
.image-container.single .image-item {
  flex: 1 1 100%;
  min-height: 400px;
}

/* 两张图片布局 */
.image-container.double .image-item {
  flex: 1 1 calc(50% - 4px);
  min-height: 300px;
}

/* 三张图片布局 */
.image-container.triple .image-item:nth-child(1) {
  flex: 1 1 calc(50% - 4px);
  min-height: 400px;
}
.image-container.triple .image-item:nth-child(2),
.image-container.triple .image-item:nth-child(3) {
  flex: 1 1 calc(50% - 4px);
  min-height: calc(200px - 4px);
}

/* 四张及以上图片布局 */
.image-container.multiple .image-item {
  flex: 1 1 calc(50% - 4px);
  min-height: 200px;
}

说明 #

• 通过React动态判断图片数量，给容器添加对应类名，结合Flex布局实现自适应
• 使用object-fit: cover保证图片不会拉伸变形
• 所有尺寸和间距均可根据实际需求调整，完全基于Flex实现，无需依赖Grid布局

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