使用Flexbox实现网格布局：如何让第三个flex项紧贴第一个下方？

当然有办法解决这个问题！先帮你理清核心原因：你当前用的是行优先的Flex布局（默认flex-direction: row），换行后的每一行都会整体排在前一行的下方，而第一行的高度由最高的item2（200px）决定，所以第三项item3会从200px的位置开始，而不是item1的底部（100px处）。下面给你两种最实用的解决办法：

方案一：使用CSS Grid布局（推荐，更直观灵活） #

Grid布局天生适合这种行列对齐的场景，只需要定义两列，就能让item3自动落在item1的正下方：

ul{ 
  display: grid;
  grid-template-columns: 1fr 1fr; /* 分成两等宽列 */
  list-style: none; 
  border: 1px solid red; 
  margin: 0; 
  padding: 0; 
}
li { 
  background-color: lightblue; 
  height: 100px; 
  text-align: center; 
}
.item2 { height: 200px; background-color: yellow; }
.item3 { background-color: magenta; }

修改后，item1和item3会占据第一列，item2和item4占据第二列，完全不受列内其他元素高度的影响，完美满足你的需求。

方案二：改用垂直方向的Flex布局（适合坚持用Flex的场景） #

如果一定要用Flex，可以切换成列优先的布局，配合固定容器高度实现换行：

ul{ 
  display: flex; 
  flex-direction: column; /* 垂直排列元素 */
  flex-wrap: wrap; /* 超出容器高度时换行到右侧列 */
  height: 200px; /* 容器高度设为最高列的高度（这里是item2的200px） */
  list-style: none; 
  border: 1px solid red; 
  margin: 0; 
  padding: 0; 
}
li { 
  background-color: lightblue; 
  width: 50%; /* 每个元素占容器宽度的50% */
  height: 100px; 
  text-align: center; 
}
.item2 { height: 200px; background-color: yellow; }
.item3 { background-color: magenta; }

这个方案的原理是让元素先垂直排列，当内容高度超过容器的200px时，自动换行到右侧列，从而让item3紧跟在item1下方。需要注意的是，容器高度需要根据内容手动调整，灵活性不如Grid。

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