Logo Codebridge

Flexbox Dynamic Line Separator

August 1, 2022
|
5
min read
Share
text
Link copied icon
table of content
photo of Myroslav Budzanivskyi Co-Founder & CTO of Codebridge
Myroslav Budzanivskyi
Co-Founder & CTO

Get your project estimation!

While working on a UI, we needed to add a line separator between two sections. Here it is:

On smaller viewports, the line will become horizontal:

Let’s take a look at the HTML.

We have a section, with two main child items. Between them, we will have a line separator.

In CSS, we will use flexbox to handle the layout.

We added a 1rem gap between each one, and also each child item should fill 50% of its parent. Here is the result:

Next step, we want to center the two items vertically, so we will use align-items on the parent.

Now the two items are centered (we added the red line to make it easy to spot that). You might be asking, what does that have to do with the separator?

Adding The Separator

We wanted to add this as a pseudo-element, so we wrote this CSS. Can you expect the visual result of this without scrolling down?

Oh, what is that little square doing over here? Since the pseudo-element is only a 1px border from all sides, the result will be 2*2` square.

Let’s focus a bit here. This is the core of this little CSS trick.

The square comes from using the same color for each border. With different colors, it can look like this.

Why the Separator Looks Like a Square?

Since we added align-items: center to center the child items vertically, we removed the default behavior of flexbox stretching child items (stretching vertically, in this case).

Now it looks like the following visual:

Next, we need to reorder the flex items to make the divider appears between them.

And we’re done!

To make this work on all screen sizes, we need to have the flex-direction: column mobile and flex-direction: row for larger screens.

Here is a video of changing the flex-direction. Notice how the separator changes!

This works like magic because it’s a flexbox behavior.

When flex-direction: row is set, the cross-axis is vertical thus the pseudo-element stretches vertically.

And when the cross-axis is set to flex-direction: column, it will be horizontal and so the pseudo-element stretches horizontally.

Isn’t that neat? No need to use width, height, or anything else! It’s just a border being stretching via flexbox.

The Separator Thickness

Since the border value contributes to the four directions, we need to use 0.5x of the thickness we want. For example, if we want a 1px separator, then the border should be like the following:

Gradient Separators

This is another reason for us to pick the border solution above others. We can use gradients via border-image.

Dashed Separators

Given that we’re using borders, we can also have a dashed separator.

Another Way of Doing It

If we haven’t taken the time to think about implementing this, then we might have used width and height. We are not saying the following is a bad solution, but it’s good to step out of solutions we took for granted and think of other ways of solving UI problems.

Source: https://ishadeed.com/

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

Rate this article!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
78
ratings, average
4.9
out of 5
August 1, 2022
Share
text
Link copied icon

LATEST ARTICLES

The outsourced team works together
April 23, 2025
|
4
min read

The Benefits of Outsourcing IT Services for Business Growth

Discover the key benefits of outsourcing IT services — cut costs, boost efficiency, and drive business growth with expert support and scalable tech solutions.

by Konstantin Karpushin
Read more
Read more
Working desk with staff member
April 9, 2025
|
3
min read

Top Desktop Application Development Companies in 2025

Discover the best desktop application development companies in 2025. Compare top firms by expertise, reviews, and innovation to find your ideal tech partner.

by Myroslav Budzanivskyi
Read more
Read more
Digital device creation, programming and development.
April 7, 2025
|
9
min read

Top 7 Cross Platform Mobile App Development Services

Explore top 7 cross platform mobile app development services. Compare Flutter, React Native, and Ionic, and use our checklist to choose the right framework.

by Myroslav Budzanivskyi
Read more
Read more
April 4, 2025
|
8
min read

Software Development for Startups: Top Strategies

Discover 10 proven software development strategies for startups — from Agile to MVP. Get practical tips and insights to build a successful, scalable product.

by Myroslav Budzanivskyi
Read more
Read more
Business team consulting together during a meeting around a table.
April 2, 2025
|
13
min read

Software Development and Consulting Services Explained

Drive innovation with strategic software development and consulting services. Optimize costs, reduce risks, and overcome challenges to scale your business smarter.

by Konstantin Karpushin
Legal & Consulting
Read more
Read more
March 31, 2025
|
10
min read

Mobile Application Development Life Cycle: Best Practices

Unlock mobile app success! Explore the mobile application development life cycle, learn about emerging trends, and optimize your app for long-term growth.

by Dmytro Maloroshvylo
Read more
Read more
March 28, 2025
|
9
min read

Mobile Application Development: The 2025 Trends

Discover the top mobile application development trends for 2025. See how 5G, AI, and emerging technologies will transform mobile apps and drive user engagement.

by Myroslav Budzanivskyi
Automation Tools
Read more
Read more
March 26, 2025
|
11
min read

Mobile Application Design Company: Key Factors

Choosing a mobile application design company? Explore key factors like UI/UX, security, scalability, and support to make the right decision. Read expert tips.

by Ananga Thapaliya
UI/UX
Read more
Read more
Smiling business team in formal attire celebrating a project milestone in a modern office setting.
March 24, 2025
|
9
min read

Custom Business Software: A Strategic Advantage

Gain a competitive edge with custom business software. Learn about tailored solutions, financial gains, and AI-driven automation. Explore the advantages now!

by Myroslav Budzanivskyi
Read more
Read more
March 21, 2025
|
13
min read

Full Stack Development Services: The Complete Guide

Comprehensive guide to Full Stack Development Services: explore benefits, top tech stacks like MERN and LAMP, hiring models, AI integration, and key trends.

by Myroslav Budzanivskyi
Read more
Read more
Logo Codebridge

Let’s collaborate

Have a project in mind?
Tell us everything about your project or product, we’ll be glad to help.
call icon
+1 302 688 70 80
email icon
business@codebridge.tech
Attach file
By submitting this form, you consent to the processing of your personal data uploaded through the contact form above, in accordance with the terms of Codebridge Technology, Inc.'s  Privacy Policy.

Thank you!

Your submission has been received!

What’s next?

1
Our experts will analyse your requirements and contact you within 1-2 business days.
2
Out team will collect all requirements for your project, and if needed, we will sign an NDA to ensure the highest level of privacy.
3
We will develop a comprehensive proposal and an action plan for your project with estimates, timelines, CVs, etc.
Oops! Something went wrong while submitting the form.