React Posts组件实现每行显示3个Post子组件的CSS方案

你的postsContainer当前使用flex布局但未启用换行特性，所以子元素会一直横向排列，超出容器范围也不会换行。要实现每行固定3个Post、超出自动换行的效果，只需要修改Posts.css的样式，具体如下：

核心修改：开启flex换行 #

更新.postsContainer的CSS，添加flex-wrap: wrap属性：

.postsContainer{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    /* 关键：开启自动换行 */
    flex-wrap: wrap;
    padding:100px;
}

可选优化：确保每行恰好3个Post #

如果希望严格控制每行显示3个，避免因为容器宽度变化导致布局混乱，可以调整.postContainer的宽度，结合margin计算：

.postContainer{
    height:300px;
    /* 计算逻辑：父容器宽度的1/3，减去左右margin的总和（20px*2） */
    width: calc(33.333% - 40px);
    border:2px solid black;
    border-radius: 10px;
    margin:20px;
}

这样设置后，不管容器宽度如何变化，每个Post都会占据父容器1/3的宽度（扣除margin），确保每行刚好放下3个。

修改完成后，当你在Posts组件中添加第4个及更多Post子组件时，它们会自动换行到下一行，完美实现你想要的布局效果。

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