Flexbox Dynamic Line Separator

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 develop into horizontal:

Let’s check out the HTML.

<part class="part">
  <div class="section__item section__item--start">
    
  </div>

  <div class="section__item section__item--end">
    
  </div>
</part>

We have now a bit, with two most important little one objects. Between them, we may 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 each, and in addition every little one merchandise ought to fill 50% of its mother or father. Right here is the consequence:

Subsequent step, I need to middle the 2 objects vertically, so I’ll use align-items on the mother or father.

.part {
  show: flex;
  align-items: middle;
  hole: 1rem;
  
}

.section__item {
  flex: 1;
}

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

Including the separator

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

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

Oh, what’s that little sq. doing over right here? For the reason that pseudo-element is just a 1px border from all sides, the consequence 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 will probably seem like this.

Why the separator seems like a sq.?

Since we added align-items: middle to middle the kid objects vertically, we eliminated the default habits of flexbox stretching little one objects (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 strong #d3d3d3;
  align-self: stretch;
}

Now it seems like the next visible:

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

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

And we’re completed!

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

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

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

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

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

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

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

And when the cross-axis is about to flex-direction: column, it will likely 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 strong #d3d3d3;
  align-self: stretch;
}

Gradient separators

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

.part:earlier than {
  content material: "";
  align-self: stretch;
  border: 1px strong #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 may need used width and peak. I’m not saying the next is a nasty answer, however it’s good to step out of options we took without any consideration and consider different methods of fixing UI issues.

.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!