html - flex 订单未按预期工作

Question

我有一个包含 3 个子 div 的 nav 元素，宽度分别为 25%、50% 和 25%，flexbox 顺序分别为 1、2 和 3。在移动 View 中，我想将第二个元素向下移动到下一行，占据全 Angular ，第一和第三个元素保持在第一行，每个元素占用 50% 的宽度。我将第二个元素的顺序更改为 3 和宽度 100%，同时将第三个元素的顺序更改为 2 和 50% 宽度。但是，它仍然没有按预期工作。是否有可能使用 flexbox 实现类似的东西？
我已经包含了一个示例代码

<nav>
  <div class="a">
    A
  </div>
  <div class="b">
    B
  </div>
  <div class="c">
    C
  </div>
</nav>

和CSS

nav{
  display:flex;
  flex-direction:row;
}
.a,.b,.c{
  border:1px solid blue;
  text-align: center;
}
.a{
  width:25%;
  order:1;
}
.b{
  width:50%;
  order:2;
}
.c{
  width:25%;
  order:3;
}

@media screen and (max-width: 400px){

  .a{
    width:50%;
  }
  .b{
    width:100%;
    order:3;
  }
  .c{
    width:50%;
    order:2;
  }
}

或使用 fiddle
基本上这就是我想要达到的目标。
默认 View

在手机上

Answer 1

我更新了你的 fiddle :https://jsfiddle.net/s9v926g9/1/

您需要添加两件事:

将 flex-wrap: wrap; 添加到导航元素

这将使元素换行到下一行，而不是将它们自身间隔开超过可用宽度。

设置框大小

添加

*{
  box-sizing: border-box;
}

你的 css 将确保边框不会弄乱你的 flex-wrap。