0

In this JSfiddle, the last 2 items on the last row are justified. Instead, I want them to be align to the left.

How to do that?

ul,
li {
  list-style: none;
}

ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

li {
  width: 30%;
  height: 80px;
  background: red;
  margin-bottom: 30px;
}
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>
Michael Benjamin
  • 307,417
  • 93
  • 525
  • 644
drake035
  • 3,869
  • 33
  • 97
  • 193

2 Answers2

2

You can reset margin on the last-child if it stands on second on the row :

li:nth-child(3n + 2):last-child {
  margin-right:auto;
  margin-left:5%;
}

https://jsfiddle.net/9L72e7t1/1/

ul, li {
  list-style: none;
}
ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
li {
    width: 30%;
    height: 10px;
    background: red;
    margin-bottom: 30px;
}

li:nth-child(3n + 2):last-child {
  margin-right:auto;
  margin-left:5%;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<hr/> if last is not on second position, don't bother
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
G-Cyrillus
  • 94,270
  • 13
  • 95
  • 118
-1

Hope this may work, 

ul, li {
  list-style: none;
}
ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
li {
    width: 30%;
    height: 80px;
    background: red;
    margin-bottom: 30px;
    margin-right: 10px;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
Mohammed Wahed Khan
  • 806
  • 2
  • 13
  • 32
  • This solution is not using flex. Is just using a fixed margin-right. – jbarradas Mar 30 '19 at 00:17
  • @jbarradas Ohh I see. I guess you have not used the CSS I have added. No worries you'll get it later. If it is not using flex then you are free to edit the answer. I'm waiting. – Mohammed Wahed Khan Apr 01 '19 at 05:39
  • https://jsfiddle.net/13su5aLr/ when I say your answer is "not using", I mean "is not taking advantage of". I just removed flex properties and `li` to inline-block and it has the exact same result. Since you are not using `space-between` as OP is asking. You are just using fixed margins to align the elements. Hope you see my point. If not, maybe some day you'll get it ;) – jbarradas Apr 02 '19 at 14:36