Software Development

Flexbox Dynamic Line Separator

August 1, 2022
|
5
min read
Share
text
pop-up copied
table of content
Myroslav Budzanivskyi
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

Software Development
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
pop-up copied

LATEST ARTICLES

July 19, 2024
|
5
min read

How to Build a Social Media App That Will Rock

Learn the essential steps to create a successful social media app. From defining your niche to launching and marketing, discover strategies to make your app stand out and thrive in a competitive market.

by Konstantin Karpushin, Myroslav Budzanivskyi
Social Network
UI/UX
Read more
Read more
July 18, 2024
|
6
min read

How Responsive Web Design Helps You Get More Business

Discover how responsive web design can enhance user experience, increase conversions, and expand your business reach. Learn why mobile optimization is crucial for success in today's digital marketplace.

by Myroslav Budzanivskyi
UI/UX
Read more
Read more
July 18, 2024
|
7
min read

Top Mobile App Development Frameworks in 2024

Discover the top mobile app development frameworks of 2024 that are revolutionizing the industry. Explore why Flutter, React Native, Xamarin, SwiftUI, Kotlin Multiplatform Mobile, Ionic, and NativeScript are favored by developers worldwide for their efficiency, versatility, and powerful features.

by Myroslav Budzanivskyi
Software Development
Mobile Development
Read more
Read more
July 18, 2024
|
5
min read

The Future of Education: How Mixed Reality is Revolutionizing Learning

Explore how mixed reality(MR) is revolutionizing education by combining virtual and augmented reality to create immersive learning experiences. Discover the benefits, applications, and future of mixed reality in education.

by Konstantin Karpushin, Myroslav Budzanivskyi
EdTech
VR/AR
Read more
Read more
July 18, 2024
|
5
min read

UI/UX Design: Our Top 5 Design Tools for 2024 and Beyond

Discover the top 5 UI/UX design tools for 2024 that will revolutionize your design process. Learn about Figma, Sketch, Webflow, Framer, and Axure RP and how they can enhance collaboration, prototyping, and user experience.

by Konstantin Karpushin
UI/UX
Read more
Read more
July 17, 2024
|
5
min read

How to Find the Best Software Development Partner for Your Business

Discover comprehensive tips on finding the perfect software development partner for your business. Learn how to define your needs, evaluate experience, assess technical expertise, ensure effective communication, and more.

by Konstantin Karpushin, Myroslav Budzanivskyi
Software Development
Read more
Read more
July 16, 2024
|
6
min read

The Rise of Fintech: Transforming the Financial Landscape

Discover how fintech development services are revolutionizing the financial industry. Our comprehensive guide explores solutions, benefits, and the challenges faced by the sector.

by Konstantin Karpushin
Fintech
Read more
Read more
July 16, 2024
|
7
min read

DevOps for SaaS Projects in 2024: When You Need It and How to Implement It

Learn how to implement DevOps for SaaS projects in 2024 and understand when it's necessary. Discover DevOps practices, their benefits for SaaS development, and a step-by-step implementation roadmap. Enhance product reliability, streamline workflows and improve team collaboration with these insights.

by Myroslav Budzanivskyi
DevOps
Read more
Read more
July 16, 2024
|
8
min read

Adaptive Learning Platforms: Using AI to Enhance Education Technology

Explore how AI-powered adaptive learning platforms revolutionize education by personalizing content for individual learners. This article covers the key aspects of adaptive learning systems, the role of AI technologies like machine learning and NLP and their benefits for institutions and businesses.

by Konstantin Karpushin, Myroslav Budzanivskyi
EdTech
AI
Read more
Read more
August 10, 2023
|
3
min read

Elevate Your Fashion Experience: Introducing Luvelle Luxury Fashion Retail Platform

The Luvelle Luxury Fashion Retail Platform has been developed to help users find any designer item quickly, easily, and all in one place. The platform is designed with a clean, minimalistic, and simple style.

by Konstantin Karpushin
Read more
Read more

Let’s collaborate

Have a project in mind?
Tell us everything about your project or product, we’ll be glad to help.
+1 302 688 70 80
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
Our experts will analyse your requirements and contact you within 1-2 business days.
3
Our experts will analyse your requirements and contact you within 1-2 business days.
Oops! Something went wrong while submitting the form.

Flexbox Dynamic Line Separator

How to Build a Social Media App That Will Rock

Building a social media app that captures users' attention and stands out in a crowded market is no small feat. It requires careful planning, innovative thinking, and a deep understanding of your target audience. In this article, we will explore the key steps and considerations for building a social media app that will rock and thrive in the competitive digital landscape.

How Responsive Web Design Helps You Get More Business

In today's digital age, your website is often the first impression potential customers have of your business. If your site isn't designed to adapt to the various devices people use to browse the internet, you could be losing out on significant business opportunities. Responsive web design is an approach to web development that allows your site to automatically adjust its layout and functionality based on the device being used by the visitor. Whether they are on a desktop computer, a laptop, a smartphone, or a tablet, a responsive site ensures that users have an optimal viewing experience. Let's explore how responsive web design can help you attract and retain more customers.

Top Mobile App Development Frameworks in 2024

As mobile technology continues to advance at a rapid pace, the demand for high-quality, efficient, and versatile mobile applications is greater than ever. Developers need robust frameworks to meet this demand, frameworks that not only simplify the development process but also ensure that the apps are reliable, scalable, and maintainable. In 2024, several mobile app development frameworks stand out for their capabilities and features. This article will delve into the top mobile app development frameworks of 2024, exploring their strengths, features, and why they are favored by developers worldwide.

The Future of Education: How Mixed Reality is Revolutionizing Learning

The world of education has undergone significant changes in recent years. From the proliferation of online learning platforms to the integration of augmented reality (AR) and virtual reality (VR), the educational landscape is rapidly evolving. One of the most promising advancements in this field is mixed reality (MR), a technology that combines elements of both AR and VR to create immersive and interactive learning experiences. In this article, we'll explore how mixed reality is transforming education today and what innovations we can expect in the future.

UI/UX Design: Our Top 5 Design Tools for 2024 and Beyond

In the rapidly evolving field of UI/UX design, staying updated with the latest tools is essential for creating exceptional user experiences. With each year, new tools emerge, offering innovative features that streamline the design process and enhance collaboration. As we step into 2024, here are our top five design tools that are set to shape the future of UI/UX design.