特定断点下调整flexbox项目宽度与排序时100%宽度失效问题

问题原因 #

flex容器默认flex-wrap属性值为nowrap，即使子元素总宽度超过容器宽度，也会强制所有元素在同一行展示，自动压缩子元素宽度，所以你设置的100%宽度不会生效。

解决方案 #

只需要修改两处CSS即可：

• 给.container添加flex-wrap: wrap属性，允许子元素溢出时自动换行
• 给所有flex子元素添加flex-shrink: 0，避免子元素被自动压缩，确保设置的宽度完全生效

修改后的完整CSS代码如下：

.container {
  display:flex;
  flex-wrap: wrap; /* 新增：允许换行 */
  text-align:center;
  color:white;
}
.prev {
  order: 2;
  flex-shrink: 0; /* 新增：禁止自动收缩 */
  background:red;
  height:50px;
  width:50%;
}
.next {
  order:3;
  flex-shrink: 0; /* 新增：禁止自动收缩 */
  width:50%;
  background:red;
  height:50px;
}
.content {
  order: 1;
  flex-shrink: 0; /* 新增：禁止自动收缩 */
  width:100%;
  background:black;
  height:50px;
}

@media screen and (min-width:1920px) {
  .prev {
    order: 1;
    width:25%;
  }
  .next {
    order:3;
    width:25%;
  }
  .content {
    order: 2;
    width:50%;
  }
}

HTML代码不需要修改，修改后即可完全匹配你的需求：

1. 视口≥1920px时，三个元素按prev、content、next顺序同行排列，宽度分别为25%、50%、25%
2. 视口<1920px时，content占100%宽度单独占第一行，prev、next按顺序排在第二行各占50%宽度

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