Flexbox Dynamic Line Separator – Ahmad Shadeed

Whereas engaged on a UI, I wanted so as to add a line separator between two sections. Right here it’s:

On smaller viewports, the road will grow to be horizontal:

Let’s check out the HTML.

<part class="part">
    <div class="section__item section__item--start">
        <!-- Content material -->
    </div>
  
    <div class="section__item section__item--end">
        <!-- Content material -->
    </div>
</part>

We’ve a bit, with two major youngster gadgets. Between them, we can have a line separator.

In CSS, I’ll use flexbox to deal with the structure.

.part {
    show: flex;
    hole: 1rem;
    max-width: 700px;
    margin: 2rem auto;
}

.section__item {
    flex: 1;
}

I added a 1rem hole between every one, and in addition every youngster merchandise ought to fill 50% of its dad or mum. Right here is the outcome:

Subsequent step, I need to heart the 2 gadgets vertically, so I’ll use align-items on the dad or mum.

.part {
    show: flex;
    align-items: heart;
    hole: 1rem;
    /* different types */
}

.section__item {
    flex: 1;
}

Now the 2 gadgets are centered (I added the crimson line to make it simple to identify that). You could be asking, what does that must do with the separator? I completely perceive, let’s hold going.

Including the separator

I needed so as to add this as a pseudo-element, so I wrote this CSS. Are you able to anticipate the visible results of this with out scrolling down?

.part:earlier than {
    content material: "";
    border: 1px stable #d3d3d3;
}

Oh, what’s that little sq. doing over right here? For the reason that pseudo-element is barely a 1px border from all sides, the outcome can be 2*2` sq..

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

The sq. comes from utilizing the identical colour for every border. With totally different colours, it could appear like this.

Why the separator seems to be like a sq.?

Since we added align-items: heart to heart the kid gadgets vertically, we eliminated the default habits of flexbox stretching youngster gadgets (stretching vertically, on this case).

To repair that, we have to reset the alignment of the pseudo-element to stretch.

.part:earlier than {
    content material: "";
    border: 1px stable #d3d3d3;
    align-self: stretch;
}

Now it seems to be like the next visible:

Subsequent, I have to reorder the flex gadgets to make the divider seems between them.

.section__item--start {
    order: -1;
}

And we’re finished!

To make this work on all display screen sizes, we have to have the flex-direction: column cell and flex-direction: row for bigger screens.

.part {
  show: flex;
  flex-direction: column;
  hole: 1rem;
}

.part:earlier than {
    content material: "";
    border: 1px stable #d3d3d3;
    align-self: stretch;
}

@media (min-width: 700px) {
    .part {
        align-items: heart;
        flex-direction: row;
    }
}

Here’s a video of adjusting the flex-direction. Discover how the separator modifications!

This works like magic as a result of it’s a flexbox habits.

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

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

Isn’t that neat? No want to make use of width, peak, or anything! It’s only a border being stretching by way of flexbox.

The separator thickness

For the reason that border worth contributes to the 4 instructions, we have to use 0.5x of the thickness we would like. For instance, if we would like a 1px separator, then the border must be like the next:

.part:earlier than {
    content material: "";
    border: 0.5px stable #d3d3d3;
    align-self: stretch;
}

Gradient separators

That is one more reason for me to choose the border resolution above others. We will use gradients by way of border-image.

.part:earlier than {
    content material: "";
    align-self: stretch;
    border: 1px stable #d3d3d3;
    border-image: linear-gradient(45deg, #3f51b5, #cddc39) 1;
}

Dashed separators

On condition that we’re utilizing borders, we will even have a dashed separator.

.part:earlier than {
    content material: "";
    border: 1px dashed #d3d3d3;
    align-self: stretch;
}

One other means of doing it

If I haven’t taken the time to consider implementing this, then I might need used width and peak. I’m not saying the next is a foul resolution, but it surely’s good to step out of options we took as a right and consider different methods of fixing UI issues.

/* On small sizes */
.part:earlier than {
    content material: "";
    peak: 2px;
    background-color: lightgrey;
}

@media (min-width: 700px) {
    .part:earlier than {
        width: 2px;
        peak: 150px;
    }
}

See the Pen
Untitled by Ahmad Shadeed (@shadeed)
on CodePen.

I hope you’ve realized one thing new. Thanks for studying!