使用Flex布局实现每行居中放置3个div时出现排版异常求助

存在的问题 #

• 语法错误：.container 选择器的样式块缺少闭合大括号，会导致后续样式规则失效。
• 嵌套层级问题：Flex 容器的直接子元素是 Offer 组件里外层的无样式 div，不是你写了宽度的 .box，对 .box 设置的宽度不会影响 Flex 布局的排版计算。
• 重复ID问题：Offer 组件里使用了固定ID ser-id，循环渲染多个组件时会出现ID重复，不符合HTML规范。
• 宽度规则问题：没有限制Flex子项的宽度占比，默认按子项实际宽度自动填充，只要容器宽度足够就会挤进更多元素，所以会出现一行4个的情况。
• 冗余代码：Flex布局下子元素的float: left规则完全失效，属于无用代码。
• 盒模型问题：默认盒模型是content-box，设置的width仅代表内容宽度，padding和border会额外撑大元素总宽度，会干扰宽度计算。

修复方案 #

1. 补全.container的闭合大括号，删除.box里的float: left规则。
2. 全局设置box-sizing: border-box统一盒模型，避免内边距撑宽元素。
3. 给Offer组件外层的div设置类名（如offer-item），删除重复的ser-id，将宽度规则设置在Flex直接子项offer-item上。
4. 用calc计算Flex子项宽度，保证一行刚好放3个：宽度为33.33%减去左右margin的总宽度。

修改后代码示例 #

CSS部分 #

* {
  box-sizing: border-box;
}
.container{
  display: flex;                
  justify-content: center; 
  padding-top: 20px;
  color:black;
  padding-bottom: 30px;
  flex-wrap: wrap;
  align-items: center;
}
.offer-item {
  /* 2*16px的左右margin，可按需调整数值 */
  flex-basis: calc(100% / 3 - 32px);
  margin: 16px;
  min-width: 240px; /* 兼容小屏幕，最小宽度保留原设置 */
}
.box{
  background-color: white;
  border-radius: 7px;
  box-shadow: 0 2px 5px #ccc;
  width: 100%;
  height: 300px;
  padding: 20px;
  text-align: center;
}

组件部分 #

const Offer = (props) => {
  return (
    <div className="offer-item">
      <div className="box">
        <img className="icon" src={props.img} alt="" />
        <h2>{props.title}</h2>
        <p>{props.content}</p>
      </div>
    </div>
  );
};

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