Flex布局换行时修改项目顺序：实现中间项目下移且首尾元素不换行

实现方案 #

可通过媒体查询结合flex的order属性实现需求，修改后完整代码如下：

CSS代码 #

.container{
  width: 80%;
  height: 31em;
  margin: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background-color: lightgrey;
  /* 新增：避免a、c总宽度不足导致换行 */
  min-width: 300px;
}
.a{ 
  flex: 1 0 20%; 
  min-width: 150px;
  height: 50%;
  background-color: pink;
}
.c{ 
  flex: 1 0 20%; 
  min-width: 150px;
  height: 50%;
  background-color: lightblue;
}
.b{ 
  flex: 1 0 60%; 
  min-width: 350px;
  height: 50%;
  background-color: lightgreen;
}
/* 新增：宽度不足时调整b的排版优先级 */
@media (max-width: 650px) {
  .b {
    order: 1;
    flex-basis: 100%;
  }
}

HTML代码 #

<div class="container">
    <div class="a">a</div>
    <div class="b">b</div>
    <div class="c">c</div>
</div>

原理解释 #

• 换行阈值计算：三个元素的最小宽度总和为150px+350px+150px=650px，以此作为媒体查询的触发边界，宽度小于该值时触发换行规则。
• 中间元素优先换行：flex布局会按order值从小到大排列元素，默认order为0，给b设置order:1后，b的排版优先级低于a、c，会被自动调整到第二行，配合flex-basis:100%让b占满整行宽度。
• 避免a、c后续换行：a、c的最小宽度总和为300px，给容器设置min-width:300px即可保证容器宽度永远不会小于a、c的总最小宽度，避免二者后续出现换行。

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