Style spacing between repeated elements in CSS using flex gap

It's a pretty common scenario - you have to place a few elements in equal distances. E.g. unordered list items.

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</div>

The first solution that comes to mind probably is to use margins. Unfortunately - the last element must be styled separately in this case.

.item {
  width: 100px;
  height: 50px;

  margin-bottom: 40px;
}

.item:last-of-type {
  margin-bottom: 0;
}

Another idea is to use the basic flex property „space-between” and set a fixed height. There is simple math behind that. Every element has 50px height and between every two of them, we want to have 40px of spacing. 50 * 4 + 40 * 3 = 320.

.list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  height: 320px;
}

.item {
  width: 100px;
  height: 50px;
}

The main problem with this solution is the lack of flexibility. By adding a new element to the list - we have to calculate height by hand. Not very cheerful though. (But maybe in your case height of the conatiner is more important for the layout than the specific spacing between elements - then this will be ideal for you).

There is also a third nice option, that I learn and started to use. Flex has property „gap” which is not reserved just to grid as I thought before. It’s a perfect use case for it.

.list {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  row-gap: 40px;
}

.item {
  width: 100px;
  height: 50px;
}
A girl receiving new message

Sign to our Newsletter

We're committed to your privacy. Curiosum uses the information you provide to us to contact you about our relevant content. You may unsubscribe from these communications at any time. For more information, check out our privacy policy.

Oskar Legner
Oskar Legner

Read more
on #curiosum blog

Phoenix LiveView Tutorial: Adding Phoenix PubSub and Pow Authentication to Messenger
  • Elixir

Phoenix LiveView Tutorial: Adding Phoenix PubSub and Pow Authentication to Messenger

We've already bootstrapped our Phoenix LiveView-based Messenger app's database structure and a first LiveView page.

This time, we're going to improve real-time communication between the app's users using Phoenix PubSub, and use the Pow library to add secure user authentication.

As of November 2020, the latest Phoenix LiveView version is 0.14.8 - and the series has been updated to match it!

5 top-tier companies that use Elixir
  • Elixir

5 top-tier companies that use Elixir

Elixir is a pretty capable language - and it consistently ranks near the top of most loved and wanted languages rankings. It has a large following and some very persuasive preachers as well. But that would not be enough to make me like it – what I need as real proof of its strengths is real businesses that strive with Elixir.

That’s what this list is all about – a bunch of stories from top companies that chose Elixir and never looked back. Let us show you how its power and versatility shows in practice.