使用Flex布局将photo-grid-container置于header下方的技术问询

要让photo-grid-container显示在header下方，只需要给父容器.header-container添加flex-direction: column属性即可——Flex布局默认的排列方向是横向（row），改成纵向后内部元素会自动从上到下堆叠。

修改后的完整CSS代码 #

.header-container {
  color: #5995DA;
  background-color: #D6E9FE;
  display: flex;
  /* 核心修改：改为纵向排列 */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px; /* 可选：避免内容贴容器边缘 */
}
.header {
  width: 900px;
  height: 300px;
  display: flex;
  justify-content: space-between;
  align-items:center; 
}
.photo-grid-container {
  display: flex;
  justify-content: center;
  width: 100%; /* 让容器占满父元素宽度，方便内部内容对齐 */
}
.photo-grid {
  width: 900px; /* 和header宽度保持一致，视觉对齐更整齐 */
  display: flex; /* 可选：若需要照片横向排列则添加 */
  gap: 10px; /* 可选：给照片之间添加间距 */
}

HTML部分无需修改，保持你原有的结构即可。

关键修改说明 #

• flex-direction: column：这是实现上下排列的核心，将.header-container的子元素从横向布局切换为纵向布局，header自然会出现在photo-grid-container上方。
• align-items: center：确保.header-container内部的元素在水平方向居中，和头部的布局保持一致。
• 设置.photo-grid宽度为900px：让照片网格的内容和头部内容对齐，提升整体视觉协调性。

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