Can someone help me with this issue? I am trying to create a navigation bar with centered menus/links, a logo on the left, and call-to-action buttons and icons on the right.
If the content overflows or wraps, I want the center column to move to the next line at full width while keeping the left and right columns stacked as two separate columns.
Below is an example of the code I am using:
* {
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>View the Fiddle here: https://jsfiddle.net/3erodmv7/3/
The menu items have dynamic widths, so I need them to overflow/wrap instead of using fixed widths and media queries.
When there is no overflow:
--------------------------------------
| Logo | Link1,Link2,Link3 | Buttons |
--------------------------------------
When there is overflow:
------------------------------------
| Logo | Buttons |
------------------------------------
| Link1,Link2,Link3 |
------------------------------------