CSS Trick: Flexbox Borders

February 19, 2023

The foundation of the content of this post was originally part of Weeknotes 23:20. I ended up refactoring my solution a bit and wanted to expand on it in its own post.

As I was working on a new project a couple of weeks ago, I was trying to figure out how to add some vertical borders within my flexbox layout. I wanted the borders to be flexible with the layout so they needed to be part of the flex layout.

After thinking about some different ways I could add the borders, I decided I wanted them to be elements within the flexbox layout. So I decided to create two empty divs in the layout and then tried to style them. But I was having trouble figuring out how to get the element to the flexbox container’s full height.

I tried several different things and was not having any luck. So I decided to throw it out there to my development teammates on Slack. Brandon came back and asked me about using align-self: stretch on the two border elements.

As soon as I read it, I knew I needed it. This property is a default on Flex items so I don’t think I have ever had to add the stretch property in my code so it was not something that came to mind as I was looking for a solution. Because I had added align-items: center to the flex container, I need the stretch property on the border lines to make them stretch to fill the full height of the flex container.

When I was originally coming up with a solution, I was wanting to use the pseudo elements ::before and ::after. These are go-to’s when wanting to add cosmetic content to a page. But I was thinking about them in the wrong way. I wanted to use the ::before selector on the flex items. But using them on the flex items does not make them a part of the flex layout because they are children of the flex items, not the flex container.

When I was trying to figure out a solution to making the flex items go the full height of the container, I had come across Ahmad Shadeed’s Flexbox Dynamic Line Separator article.

Ahmad was writing about a similar solution to what I originally wanted to do with the pseudo-elements. He put the pseudo-elements on the flex container so they were now part of the flex layout. He also used order to position the borders in the correct location.

When I was thinking about where to apply the pseudo-elements, I didn’t consider the fact that I could use order. By default, the ::before element would be first and the ::after element would have been last in the layout.

.footer-logo {
  order: -1;
}

.social-links {
  order: 5;
}

I confess that I am very careful with using order in my layouts because of accessibility concerns. But because the pseudo-elements are not part of the DOM, using order in this solution did not cause the accessibility issue if you tab through the content.

I liked this second solution much better because I did not have to add unnecessary code to my HTML. I used the pseudo-elements for the cosmetic content, which is what they are designed for.