如何用Flexbox实现指定图片布局？求替代Grid的Flex方案

我有一个对象数组imageList，需要用Flexbox实现目标布局（第一张图片占据两行高度，其余图片按一行高度排列，形成类似Grid的跨行效果）。我已经能用Grid布局实现该效果（通过伪类:nth-child(1)设置gridRowStart: 1、gridRowEnd: 3），但用Flexbox尝试时效果不符合预期。

当前我的React代码和CSS如下：

App.tsx #

import React from "react";
import "./App.css";

const App = () => {
const imageList = [
{
  id: "1",
  url: "https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "2",
  url: "https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "3",
  url: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80",
},
{
  id: "4",
  url: "https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80",
},
{
  id: "5",
  url: "https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
},
{
  id: "6",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883334/person-1_rfzshl.jpg",
},
{
  id: "7",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883409/person-2_np9x5l.jpg",
},
{
  id: "8",
  url: "https://res.cloudinary.com/diqqf3eq2/image/upload/v1586883417/person-3_ipa0mj.jpg",
},
];

return (
<div className="mainWrapper">
  {imageList.map((image: any, index) => (
    <div key={image.id} className="imageWrapper">
      <img src={image.url} alt={image.url} width="100px" />
      <h4 className="heading">{image.id}</h4>
    </div>
  ))}
</div>
);
};

export default App;

App.css #

*{
margin: 60;
padding: 60;
}
.mainWrapper{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin-left: 160px;
margin-right: 160px;
}

.imageWrapper{
position: relative;
flex: 1 0 21%;
height: 200px;
}

img{
min-width: 100%; 
height: 100%;
border-radius: 20px;
}

.heading{
position: absolute; 
top: 0; 
color: white;
}

想请教如何通过Flexbox实现目标布局，尤其是怎么利用flex-grow属性调整图片？

Flexbox是一维布局，但可以通过调整元素高度和排列规则模拟跨行效果，具体修改如下：

1. 修正基础样式 #

先修复全局样式的单位错误，同时给容器添加对齐规则，避免元素被垂直拉伸：

*{
margin: 0;
padding: 0;
box-sizing: border-box; /* 避免padding、border影响宽度计算 */
}
.mainWrapper{
display: flex;
flex-wrap: wrap;
gap: 30px;
margin: 0 160px;
align-items: flex-start; /* 防止元素被垂直方向拉伸 */
}

2. 调整图片容器的flex属性与高度 #

我们需要固定每个图片容器的宽度比例，同时让第一张容器占据两倍高度：

.imageWrapper{
position: relative;
flex: 0 0 21%; /* flex-shrink设为0，避免宽度被压缩 */
height: 200px;
}

/* 让第一张图片容器高度等于两个普通容器+gap的总和 */
.imageWrapper:nth-child(1){
height: calc(200px * 2 + 30px);
}

3. 优化图片填充效果 #

为了避免图片拉伸变形，添加object-fit属性：

img{
width: 100%; 
height: 100%;
border-radius: 20px;
object-fit: cover; /* 保持图片比例，裁剪多余部分 */
}

说明 #

这里不需要依赖flex-grow属性——因为我们需要固定的宽度比例，flex-grow更适合分配容器剩余空间的场景。通过固定flex-basis为21%，并设置第一张容器的高度为两倍+gap，就能模拟出Grid的跨行视觉效果。

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