如何实现div内元素从左到右排列，满行后自动换行继续排列

核心问题说明 #

你当前的flex容器未配置换行属性，flex布局默认值为flex-wrap: nowrap，所有子元素会强制挤在同一行展示，不会自动折行到下一行。

最终修改方案 #

直接替换你的CSS代码为下方内容即可实现预期排列效果：

.pedido-tudo {
    margin-left: 1.5rem;
    width: 60rem;
    max-width: 60rem;
    display: flex;
    flex-direction: row;
    /* 新增换行属性，是实现自动折行的核心 */
    flex-wrap: wrap;
    /* 用gap统一控制子元素横向、纵向间距，避免每行第一个元素左边距多余的问题 */
    column-gap: 5.7rem;
    row-gap: 1rem;
}

.pedido-quadrado{
    /* 移除子元素单独设置的外边距，改用父容器gap控制更稳定 */
    width: 18rem;
    height: 20rem;
    border: 1px rgb(170, 0, 0) solid;
    color: black;
    font-size: 16px;
}

如果不需要调整间距逻辑，只需要给.pedido-tudo类加一行flex-wrap: wrap也可以实现基础的换行效果。

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