Is it possible to make a pure CSS solution like this:
min-width
. This is how it looks now:
And this is how I would like it too look like (I've managed those bottom items' width manually just to show the expected result):
.container { display: flex; flex-wrap: wrap; } .item { background: yellow; min-width: 100px; height: 20px; text-align: center; border: 1px solid red; flex-grow: 1; }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div>
Here is a fiddle demo.
If you add content and/or width and/or flex-basis to one or more items, and the items grow to exceed 800px (the width of the container), then your flex items will wrap. But note, they won't wrap based on your re-sizing of the browser window, because the container doesn't occupy width: 100% of the viewport.
Add display:flex, justify-content: space-between; to the parent and give a width to the boxes that totals to less than 100%. E.g. These boxes have a width of 32% each.
The flex-wrap CSS property sets whether flex items are forced onto one line or can wrap onto multiple lines. If wrapping is allowed, it sets the direction that lines are stacked.
Currently, flexbox offers no clean solution for aligning flexible items in the last row or column. It's beyond the scope of the current spec.
Here's more information and various solutions people have used to get around the problem:
However, last-row alignment is not a problem with another CSS3 technology, Grid Layout. In fact, it's very simple with this method (and requires no changes to the HTML):
.container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); grid-auto-rows: 20px; grid-gap: 5px; } .item { background: yellow; text-align: center; border: 1px solid red; }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> </div>
The grid-template-columns
property sets the width of explicitly defined columns. The rule above is telling the grid container to create as many columns as possible (auto-fit
), and each column's width will be a minimum of 100px and maximum of 1fr
, which consumes remaining space (similar to flex-grow: 1
). When there's no more space on the row, a new row is created.
The grid-auto-rows
property sets the height of automatically created rows. In this grid each row is 20px tall.
The grid-gap
property is a shorthand for grid-column-gap
and grid-row-gap
. This rule sets a 10px gap between grid items. It doesn't apply to the area between items and the container.
Note that the settings above are all at the container-level. Unlike with flex items, we can remove the responsibilities for height, width and margin (to an extent) from grid items.
Browser Support for CSS Grid
Here's the complete picture: http://caniuse.com/#search=grid
Cool grid overlay feature in Firefox: In Firefox dev tools, when you inspect the grid container, there is a tiny grid icon in the CSS declaration. On click it displays an outline of your grid on the page.
More details here: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
Right not, there is no pure CSS solution. Flexbox always tries to fill whole width of container with growable items. So, you'll need to insert some hidden items that will fill the empty space while being invisible to user.
Try this:
.container { display: flex; flex-wrap: wrap; } .item { background: yellow; min-width: 100px; height: 20px; text-align: center; border: 1px solid red; flex-grow: 1; } .item-hidden { min-width: 100px; flex-grow: 1; border: 1px solid transparent; }
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item-hidden"></div> <div class="item-hidden"></div> <div class="item-hidden"></div> <div class="item-hidden"></div> </div>
Similar problem was discussed here: Flex-box: Align last row to grid
In future, you will be able to use multiple ::after pseudoelements, so you won't need to insert additional items to HTML.
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