使用CSS Flexbox实现React页面双容器响应式布局咨询

架构老林

2026-10-2

解决方案

现有代码优化点

已使用Flex布局的前提下不需要额外写float: left属性，属于冗余代码，Flex本身可完全实现排列需求
缺少响应式媒体查询逻辑，需要在小屏断点下修改.home-page的flex-direction属性实现上下堆叠效果
建议统一全局盒模型，避免padding撑大容器导致宽度溢出，用flex属性代替固定宽度写法适配性更强

修正后完整CSS代码

/* 全局统一盒模型，清除默认边距，避免布局溢出 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.App {
  max-width: 900px;
  min-height: 100vh;
  /* 合并原重复的margin属性 */
  margin: 0 auto;
}

.home-page {
  display: flex;
  /* 桌面端默认横向排列 */
  flex-direction: row;
  justify-content: center;
  margin: auto;
  text-align: center;
  width: 100%;
}

.home-page-left-container {
  display: flex;
  min-height: 60vh;
  /* flex占8份，对应80%宽度占比 */
  flex: 8;
  padding: 10px;
}

.home-page-right-container {
  padding: 10px;
  background: beige;
  /* flex占2份，对应20%宽度占比 */
  flex: 2;
}

/* 响应式断点，768px为常见平板/手机分界，可按需调整数值 */
@media (max-width: 768px) {
  .home-page {
    flex-direction: column;
  }
  /* 小屏下两个容器占满整行宽度 */
  .home-page-left-container,
  .home-page-right-container {
    width: 100%;
  }
}