小编D.R*_*llo的帖子

这是我的问题。我有一个导航栏，其菜单/链接位于中心。左边是徽标，右边是cta按钮和图标

如果溢出/自动换行，则中间的列应以全宽放置在下一行，而左列和右列则以2列保持在顶部。

给出以下示例代码：

* {
  box-sizing: border-box;
}
body, html {
  margin: 0;
  padding: 0;
}
.content {
  display: flex;
  flex-wrap: wrap;
}

.a, .b, .c{
  border: 1px solid black;
  flex: 1;
  padding: 10px;
}


.b, .c {
 flex-wrap: wrap-reverse;
}

<div class="content">
  <div class="a">LogoAndStuff</div>
    <div class="b">Link1,Link2,Link3,Link4</div>
    <div class="c">Buttons,Icons</div>
</div>

小提琴：https : //jsfiddle.net/3erodmv7/3/

菜单项/链接具有动态宽度，因此我依靠溢出/包装而不是固定宽度和媒体查询。

不溢出：

--------------------------------------
| Logo | Link1,Link2,Link3 | Buttons |
--------------------------------------

溢出：

------------------------------------
| Logo            |        Buttons |
------------------------------------
| Link1,Link2,Link3                |
------------------------------------