CODEWITHSUNDEEP
htmlcss
Sinan Samet
Sinan Samet

Reputation: 6752

Spreading items within an li evenly like in a table

I want to spread the items within the li evenly how do I do that? I tried flexbox but I'm not sure on how to make that work.

#overzicht {
  max-height: 500px;
  overflow-y: auto;
  display: flex;
}

span {
  display: inline-flex;
  justify-content: space-between;
}
<ul id="overzicht" class="list-group">
  <li class="list-group-item">
    <span>Name</span>
    <span>Address</span>
    <span>Status</span>
  </li>
</ul>

Upvotes: 0

Views: 35

Answers (1)

Tibi Buzdugan
Tibi Buzdugan

Reputation: 82

You should add "display:flex" to the immediate parent of the elements you want to spread as a table.

#overzight > li {
  display: flex;
  justify-content: space-between;
}

span {
  flex-grow: 1;
  flex-shrink: 0;
}

A great tutorial and cheat sheet for flexbox can be found here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions