Menu
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.
214
Flexible Box Layout Module - 8.1. Therefore you could use margin-top: auto to distribute the space between the other elements and the last element. This will position the last element at the bottom. Likewise, you can also use margin-left: auto or margin-right: auto for the same alignment horizontally.
You could instead set align-items to flex-start in order to make the items line up at the start of the flex container, flex-end to align them to the end, or center to align them in the center.
For 3 items per row, add on the flex items: flex-basis: 33.333333% You can also use the flex 's shorthand like the following: flex: 0 0 33.333333% => which also means flex-basis: 33.333333% .
If you are using flexbox and want the content to wrap, you must specify flex-wrap: wrap . By default flex items don't wrap. To have the images be three-across, you should specify flex-basis: 33.33333% .
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>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; } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
