如何用无序列表结合Flex实现首图占50%的画廊网格布局

要实现你要的画廊布局，核心是把<ul>作为Flex容器来控制所有<li>的排列，而不是给单个<li>设置Flex属性。你的当前代码错误地将非首项<li>设为Flex容器，导致布局逻辑混乱。

正确的CSS代码 #

/* 重置列表默认样式，设置为Flex容器并允许换行 */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

/* 首项占50%宽度，禁止压缩 */
li:first-child {
  width: 50%;
  flex-shrink: 0;
}

/* 其余项各占25%宽度，自动填充剩余空间 */
li:not(:first-child) {
  width: 25%;
}

/* 图片自适应容器宽度 */
li img {
  width: 100%;
  height: auto;
  display: block;
}

布局逻辑说明 #

• 父容器<ul>设置display: flex和flex-wrap: wrap，让所有子元素<li>在一行放不下时自动换行。
• 首项<li>占50%宽度，flex-shrink: 0确保它不会被其他元素挤压变形。
• 剩余4个<li>各占25%宽度：首项占满左半部分后，右半部分（50%宽度）刚好能容纳两个25%的元素，自动换行后就形成了右侧2×2的网格。
• 图片设置width: 100%保证自适应容器，避免溢出或留白。

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