Using Flex Box is a modern and highly effective way to create responsive web site with fluid layouts. As modern browsers support the CSS flex property there are few drawbacks other than it not playing nicely in older browsers and/or Internet Explorer 11. Sometimes though you may want to force a break / new line in a flex layout (in the same order) purely for design purposes, so for example you may want to show less items on a top row than on the second row. That goes against the flexbox natural layout, as usually you would have the row with the lesser number of items on the bottom.

Example

On a recent client site we wanted 6 items on the first line and 7 on the second and we wanted this to happen 'Cross Browser'.Natural FlexThe natural flex without a break would display like:-

So we have more items (1) on the top row, but what we want to see is:-Flex WrapA flex wrap after the 7th item so that we get an initial 2 rows with one more item on the top row:-

The Flex Wrap Code

Yes there are ways to force a wrap with CSS 'flex-wrap: wrap;'... but we found the only way to ensure a flex wrap in an out of sequence order Cross Browser is to physically insert a 'flex-basis' 100% div that forces a break at a specific point and this is how you do it:-

So what the code does is insert a .break div after the 6th item to force a break/new line after that item, pushing the other items to the next line out of the usual flow (as per the second of the above images)

‍Note: You don't have to use script to insert the .break div if you prefer to hard code it manually. In our case the items were being dynamically created and so the script was able to interrupt the html output to allow for the break.

‍