Flexbox space between behavior combined with a wrapper

Question

I use flexbox to create a beautiful mesh of fragments that automatically wraps when tiles do not fit on a single line.

I use justify-content: space-between so that the tiles adhere to the left and right sides of the parent container, and any remaining space is allocated only "in the middle", but not left and right.

Any other justify option also places a space to the left and right of the outer two flex items.

The problem is that if the line does not have the same number of fragments as in the previous line, I would like the last lines to be left justified. Can this be done using only flex properties?

Current result:

 ▀ ▀ ▀ ▀ ▀ 

Desired Result:

 ▀ ▀ ▀ ▀ ▀ 

HTML

 <div class="browser"> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> </div> 

CSS

 .browser { width: 700px; display:flex; justify-content: space-between; padding-bottom:100px; flex-wrap:wrap; border:1px solid red; } .case { flex: 0 0 200px; background-color:#ccc; height:100px; border:1px solid blue; margin-bottom:10px; } 

Codepen

Answer 1

This is pretty annoying, but you cannot use flexbox for this. imho they completely threw the ball when they made the specification, because what you describe is the behavior that we all would like to have in 99% of cases, while the available space and the space between positions of a position in strange ways (in particular , between spaces) that just don't apply in the real world.

"An additional property of" flex-last-row: "to adjust the behavior of the last line in justified containers of flex space or between spaces would be really welcome. But this is only in our developer’s dream.

It has javascript hacks and even some very specific CSS hacks (such as "gazillion calcs and specific nth-childs"), but again, the whole reason for using flexbox should be to avoid re-hacks, as we should do with clearfixes by floats and font size: 0 on inline-block containers ...

The best way for me is to go with a CSS grid instead and apply

 /* for space-around style */ .fixed-grid--around{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); justify-items: center; } /* for space-between style*/ .fixed-grid--between{ grid-template-columns: repeat(auto-fit, 150px); justify-content: space-between; } /* both should run fixed width elements equal to the declared in the container */ .grid-element{ width: 150px; } 

By setting the minimum width of the grid columns to the width of their elements and the maximum column width to 1 fr, we can make them evenly distribute the space around them. For a space between style, autofit and space-between does the trick.

Thus, it adds columns to fill the container, evenly distributes the space between them until another column is added, and wraps as needed. That we always hoped for flexbox.

The pen I made before investigating the problem:

https://codepen.io/facundocorradini/pen/XVMLEq

If you intend to use this, be sure to add a backup for browsers that do not support the grid. can be float, inline-blocks, flex or whatever. CSS Grid is really good at overriding backups , so it's pretty easy to apply.

Answer 2

You can do this using the CSS Grid layout with grid-template-columns: repeat(auto-fit, 200px) and justify-content: space-between .

 .browser { width: 700px; display: grid; grid-template-columns: repeat(auto-fit, 200px); justify-content: space-between; padding-bottom: 100px; border: 1px solid red; } .case { background-color: #ccc; height: 100px; border: 1px solid blue; margin-bottom: 10px; } 

 <div class="browser"> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> </div> 

Answer 3

The solution is to add a hidden element using a pseudo-element so that you have 6 elements and save the required layout.

 .browser { width: 700px; display: flex; justify-content: space-between; padding-bottom: 100px; flex-wrap: wrap; border: 1px solid red; } .case { flex: 0 0 200px; background-color: #ccc; height: 100px; border: 1px solid blue; margin-bottom: 10px; } .browser:after { content:""; flex: 0 0 200px; } 

 <div class="browser"> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> <div @click='projectClicked' class="case"> <h3>Project</h3> </div> </div> CSS