Nice one by Ahmad Shadeed: a line-separator between two flex items that plays nice with either
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:
Try resizing the embed above to see the
.section‘s flex-direction alter between
column. The separator will be correctly positioned, thanks to flexbox’s nature.