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:
- Stretch the injected line
- Manually set the
orderof 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.