Flexbox Dynamic Line Separator

Nice one by Ahmad Shadeed: a line-separator between two flex items that plays nice with either flex-directions.

The line itself is dynamically injected using generated content. As it becomes part of the flexbox layout it’s contained in — something I didn’t know — you can control its flex properties.

The trick is to:

  1. Stretch the injected line
  2. Manually set the order of the line (or items) so that the line sits in between them items.

Here’s a demo:

See the Pen
Flexbox Dynamic Line Separator
by Ahmad Shadeed (@shadeed)
on CodePen.

Try resizing the embed above to see the .section‘s flex-direction alter between row and column. The separator will be correctly positioned, thanks to flexbox’s nature.

Flexbox Dynamic Line Separator →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.