如何通过CSS实现Flex-Box #X内4个Flex-Items的响应式排列？

根据你需要的两种响应式布局，CSS可以这样编写：

/* 基础样式，默认适配宽度<60em的移动端 */
#X {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem; /* 子项间的间距，可按需调整 */
}

#Y1 {
  width: 100%; /* 移动端占满整行 */
}

#Y2, #Y3 {
  flex: 1; /* 移动端平分该行剩余宽度 */
  min-width: 120px; /* 防止子项过窄，可选配置 */
}

#Y4 {
  width: 100%; /* 移动端占满整行 */
}

/* 桌面端适配（宽度≥60em时生效） */
@media (min-width: 60em) {
  #Y1 {
    width: auto;
    flex-basis: 30%; /* 左侧区域占比，可按需调整 */
    align-self: stretch; /* 让Y1高度与右侧区域保持一致 */
  }

  #Y2, #Y3 {
    flex-basis: calc((70% - 1rem)/2); /* 右侧区域占70%，减去间距后平分给Y2、Y3 */
  }

  #Y4 {
    width: auto;
    flex-basis: 70%; /* Y4占右侧整行宽度 */
    margin-left: auto; /* 让Y4与Y2、Y3对齐到右侧 */
  }
}

代码说明 #

• 基础样式优先适配移动端：#Y1和#Y4各占整行，#Y2和#Y3平分中间行宽度
• 屏幕宽度≥60em时切换为桌面布局：#Y1占据左侧约30%宽度，#Y2、#Y3在右侧上半部分并排，#Y4在右侧下半部分占满整行
• gap 属性用于控制子项间距，可根据视觉需求修改数值
• align-self: stretch 确保#Y1的高度与右侧子项的总高度匹配
• calc() 用于精确计算#Y2、#Y3的宽度，避免间距导致的布局溢出

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