This content originally appeared on Bram.us and was authored by Bramus!
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.
Flexbox Dynamic Line Separator →
This content originally appeared on Bram.us and was authored by Bramus!
Bramus! | Sciencx (2022-03-06T07:56:31+00:00) Flexbox Dynamic Line Separator. Retrieved from https://www.scien.cx/2022/03/06/flexbox-dynamic-line-separator-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.