Flexbox Film Credits
I saw a lot of classic films over the Christmas break. As the credits were rolling for yet another classic, I looked at the dotted divider between film character and actor and something in my brain said ‘flexbox’, and this is what happened.
See Flexbox Film Credits by Paul (@plfstr on CodePen.
An ideal layout for displaying cast and crew list beneath a video embed.
The layout does OK when viewed on smaller screen sizes, the actors wrap beneath their name. It’s a semantic list, so without styles it falls back to, character - actor. I’m a little disappointed by the level of markup required, I wish it were cleaner. A pseudo element would be ideal instead of the extra hyphen span. I also wish the box-decoration-break markup could be applied to wrap the dots across multiple lines when the lines break.
After my theory and the concept was proven to work, I thoroughly enjoyed adding the Hollywood look. It was a fine excuse to use some serif fonts.
Posted