Flexbox: centered element with space-around elements on either side

Question

I\'m using flexbox to set up a menu consisting of seven

elements with various widths. I\'d like my middle (4th in the source order)

Answer 1

I think the way to do this is to split the items into three different ul elements, and then use the flex property to set how large the three columns are.

The outside columns have three elements in them, so they get flex:3. The centered column only has one element, so it gets flex:1. That way, when you resize, flexbox will use 3 flex units for the larger columns, and 1 flex unit for the centered column. If you need to use a different number of items in any of the columns, just change the flex unit to reflect how many items are inside it.

Working fiddle: jsfiddle