September 20, 2016

Flexbox Break Row into Even Amount of Children

Today i needed a Flexbox row to break into an equal amount of tiles. Some Browser support the css page break to achieve this but unfortunately this isn’t working in Google Chrome. So I had to figure something out. The solution is to add an element that is hidden by default and steps in as a line breaker when required. My breakpoint is set to 500px.

Result on screens < 500px width:


Result on screens > 500px width:



See this CodePen for working example!

Related Posts

Admin Admin
Developer at thecodecampus </>

Leave a Reply

Add code to your comment in Markdown syntax.
Like this:
`inline example`

code block

Your email address will not be published.