-1

I'm trying to display a list of items in a flexbox with three items in every row. The issue is that when there are only two items in the last row, the last item is aligned right, and not centre.

I tried a solution suggested in other threads about this, adding an after pseudo element to the parent element, but that doesn't quite work, as it places the last element right next to the previous element with no space between them. How can I get them to align correctly?

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.container::after {
  content: '';
  flex: auto;
}
.item {
  flex: 0 0 30%;
}
<ul class="container">
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
  <li class="item"><div><img src="https://via.placeholder.com/150"></div></li>
</ul>

EDIT:

Here's a new snippet, to clarify what I mean. I want space between the li elements.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  list-style: none;
}
.container::after {
  content: '';
  flex: auto;
}
.item {
  flex: 0 0 30%;
  background-color: blue;
  height: 100px;
  margin: 10px 0;
  border: 2px solid #999;
}
<ul class="container">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>  
</ul>
ReddaJoppe
  • 458
  • 1
  • 8
  • 24

1 Answers1

0

To cheive this with 30% not 33.3% you have to use

justify-content: end;

Not justify-content: space-between;

Check the snippet

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  list-style: none;
}

.container::after {
  content: '';
  flex: auto;
}

.item {
  flex: 0 0 30%;
}
<ul class="container">
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
  <li class="item">
    <div><img src="https://via.placeholder.com/150"></div>
  </li>
</ul>
Basil
  • 1,613
  • 12
  • 25
  • I want space between the li elements, which is why I set flex-basis to 30%, not 33.3%. Can I achieve that somehow? – ReddaJoppe Jan 09 '20 at 12:24
  • updated the answer check it. – Basil Jan 09 '20 at 12:27
  • Edited my question to clarify. I need space between the li elements. Your suggestion doesn't provide that, there only appears to be space because the li elements are wider than its content. – ReddaJoppe Jan 09 '20 at 12:41
  • Found a way to make it work with `justify-content: flex-start;` on parent and `margin-right: 5%;` on child element. Then adding `margin-right: 0;` to all child elements to the right with :nth-child selector to align child elements with container's right edge. Just requires adding more code with media queries for when smaller screen sizes need fewer elements in each line of the flexbox. – ReddaJoppe Jan 10 '20 at 09:18
  • Good for you but as an advice upvote for developers who spend time trying to help if there answer have a little help or that it might help others and mark the correct answer that answer your question that how your question becomes a help for the community. – Basil Jan 10 '20 at 09:35
  • Upvoted your answer now :-) – ReddaJoppe Jan 10 '20 at 09:48
  • I thought you downvoted for the 2 answers sorry – Basil Jan 10 '20 at 09:59