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:

small-screens

Result on screens > 500px width:

large-screens

 

See this CodePen for working example!

Can Kattwinkel
Developer at thecodecampus </>


Leave a Reply

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

```
code block
example
```

Your email address will not be published.