Equal size of flex item while breaking the last item to next line

Question

I wanted my flex items to have an equal size without setting its width.
I know it can be done by setting the flex item to flex: 1;.
However, I also wanted to break the last item into the next line but keep its width equal to the other item, now I'm stuck.

How can I do that?

ul{
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex; 
  flex-flow: row wrap;
}
li{
  flex: 1;
  border: solid 1px;
  text-align: center;
  flex-basis: calc(100% / 7);
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li class="keep-next-line">7</li> <!--Kepp this next line, but size should be equal to other item-->
</ul>

you need 6 element per row, so you divide by 6 and no need flex:1 — Temani Afif, Apr 12 '20 at 15:40
@TemaniAfif - Fair enough, that's the confusing part for me, divided by 7 because of the border. Thank you. — Polar, Apr 12 '20 at 15:47

doğukan · Accepted Answer · 2020-04-12T15:40:09.330

2

You should set flex-grow:0 and should be calc(100% / 6) instead of calc(100% / 7). Also I added box-sizing:border-box; for borders to be included in width.

ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
}

li {
  flex: 1;
  border: solid 1px;
  text-align: center;
  flex-basis: calc(100% / 6);
  box-sizing: border-box;
}

.keep-next-line {
  flex-grow: 0;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li class="keep-next-line">7</li>
  <!--Kepp this next line, but size should be equal to other item-->
</ul>

edited Apr 12 '20 at 15:40

answered Apr 12 '20 at 15:38

doğukan

23,073
13
57
69

simply removing flex:1 is enough, the main change is the 6 divider you made instead of 7 – Temani Afif Apr 12 '20 at 15:39
@TemaniAfif `box-sizing: border-box` is also required. – doğukan Apr 12 '20 at 15:41
I should have rest for a while to reset my brain, I keep dividing 7 because of the border and I didn't realize using `flex: 1;` is already redundant. – Polar Apr 12 '20 at 15:51

Equal size of flex item while breaking the last item to next line

1 Answers1