Flexbox : grow all items but last line

Question

I currently have this simple Flexbox layout:

ul {    display: flex;    flex-wrap: wrap;    list-style: none;    padding: 0;  }  li {    flex-grow: 1;    padding: 20px;    margin: 10px;    background: #ddd;  }

<ul>      <li>lorem</li>      <li>ipsum</li>      <li>dolor</li>      <li>sit</li>      <li>amet</li>      <li>consectetur</li>      <li>adipisicing</li>      <li>elit</li>      <li>sed</li>      <li>do</li>      <li>eiusmod</li>      <li>tempor</li>      <li>incididunt</li>      <li>ut</li>      <li>labore</li>      <li>et</li>      <li>dolore</li>      <li>magna</li>      <li>aliqua</li>  </ul>

I would like my elements to fill the container width (as now), but leave the last line left aligned. As you can see, the last line attempts to fill the space, and this sometimes makes the last elements to get an ugly width.

Does Flexbox allows us to do that ? I can't find a way to do it.

Answer 1

You can add an ::after pseudo-element with a huge flex-grow, so that the flex-grow: 1 of the li elements will be negligible:

ul::after {   content: '';   flex-grow: 1000000000; } 

ul {    display: flex;    flex-wrap: wrap;    list-style: none;    padding: 0;  }  li {    flex-grow: 1;    padding: 20px;    margin: 10px;    background: #ddd;  }  ul::after {    content: '';    flex-grow: 1000000000;  }

<ul>    <li>lorem</li>    <li>ipsum</li>    <li>dolor</li>    <li>sit</li>    <li>amet</li>    <li>consectetur</li>    <li>adipisicing</li>    <li>elit</li>    <li>sed</li>    <li>do</li>    <li>eiusmod</li>    <li>tempor</li>    <li>incididunt</li>    <li>ut</li>    <li>labore</li>    <li>et</li>    <li>dolore</li>    <li>magna</li>    <li>dolore</li>    <li>magna</li>    <li>aliqua</li>  </ul>

Answer 2

You can also append empty items with height: 0 to the container and make them take up for the extra space: http://codepen.io/anon/pen/OyOqrG

(Source copied from my codepen:

<div class="container">   <p></p>   <p></p>   <p></p>   ...   <p class="empty"></p>   <p class="empty"></p> </div>    .container {   max-width: 490px;   display: flex;   flex-flow: row wrap;   background-color: #00f; }  .container p {   min-width: 90px;   margin: 5px;   background-color: #f00;   height: 90px;   flex-grow: 1; }  .container p.empty {   height: 0;   margin-top: 0;   margin-bottom: 0; }