如何调整flex布局元素在移动端的排列以实现指定展示效果

AI 小北

2026-10-4

移动端flex排列实现方案

核心思路

你需要的两行布局可以通过flex-wrap控制换行实现，order属性仅在需要调整元素默认排列顺序时使用，你当前的0-10顺序刚好符合第一行6个、第二行5个的需求，无需额外调整order。

具体操作步骤

1. 新增移动端媒体查询，修改父容器样式

给.wrap添加换行属性，同时限制父容器宽度保证第一行刚好放下6个元素，第二行剩余元素自动居中：

/* 移动端断点可根据实际业务需求调整，这里以768px为例 */
@media (max-width: 768px) {
  .wrap {
    /* 开启自动换行 */
    flex-wrap: wrap;
    /* 限制父容器宽度，刚好放下6个45px的子元素加间距 */
    max-width: 330px;
    /* 子元素间距不足时自动居中，适配第二行5个元素的居中效果 */
    justify-content: center;
    /* 统一设置子元素之间的间距，比space-around更可控 */
    gap: 10px;
    /* 父容器本身在页面中水平居中 */
    margin: 0 auto;
  }
}

2. （可选）配置子元素order属性调整顺序

如果需要调整子元素的排列顺序，可以给对应元素设置order属性，属性值越小排列越靠前，示例如下：

@media (max-width: 768px) {
  /* 示例：把数字10调整到最靠前的位置 */
  .child:nth-of-type(11) {
    order: -1;
  }
  /* 示例：把数字0调整到最后位置 */
  .child:nth-of-type(1) {
    order: 1;
  }
}