How do I keep all the blocks pressed against the left side when I use the justify-content: space-between;? [duplicate]

After trying the suggestions here (thanks!) and searching the web long and wide, I've reached the conclusion that this is simply not possible with flexbox. And by that I mean that others have reached this conclusion while I stubbornly tried to make it work anyway, until finally giving up and accepting the wisdom of wiser people.

There are a couple of links I came across that might explain it better, or different aspects of the requirements, so I'm posting them here for... posterity.

How to keep wrapped flex-items the same width as the elements on the previous row?

http://fourkitchens.com/blog/article/responsive-multi-column-lists-flexbox

There is no easy way to do this with flexbox. But if you are willing to sacrifice IE then you can do it with css grid, add this to the container:

And if you want to have some space between the elements then add

I know I am kind of late, but I have been looking for solution for this in past hour or so, and I think I sort of figured it out. Put empty div on the end of your container, and set flex-grow: 1 to it, and nothing else. Also set justify-content: space-between on container, and don't use flex-grow on other items. This will always make last line align left because this div will stretch through all remaining space.

However the problem of this is that it ALWAYS makes last line align left - even if it is the only line, which makes this solution unusable for me, but it might be usable for someone who can expect more than one line of items.

If the width of your items is fixed, you can add several empty divs to the end of your list of items:

and then:

Works perfectly well.

I was able to achieve the desired result with a combination of positive and negative margins.

If each element in the container defines a margin to create a space between them:

recover the pixels from the edges of each row in the container with a negative margin of the same amount:

This should result in 10px between each element in the row with the first and last of each row at the edge of the container.

One solution that will work in many cases is simply applying padding to the items. Then you can use flex-start, and get spacing in between the cards.

For example

CSS Flex 4 columns always starting at left. I cant see wy this is impossible? If the columns should be equal in with, this working for us using calc() and relative units:

Im I missing something here? Its all abouth math, the subtracted calc() in this case 1em, gives 3 space of gap 1.333em with margin-right on 3 of 4 columns, and 0.5em subtracted calc() should give 0.666em gap with margin-right on 3 of 4 columns.

Hope this can be useful...

I just stumbled across the same problem and came up with another solution. I can't decide whether it feels kind of dirty or elegant, but decide for yourself.

Add as many empty divs as your maximum number of items per row to the container, assign them the same class as row items but remove any margin or padding from them (basically anything which gives them a height). That'll result in the row behaving as expected because after the last row item, there'll always be enough invisible "spacers" to pad the row. Those being wrapped to the next row have no height, so they shouldn't affect the rest of your page.

Example here: https://jsfiddle.net/amknwjmj/

so, you have a container and some stuff inside?

This is how it works, when you declare display: flex for your container all of its direct children will become flex too, with some default config (align-items:strech).

I guess you already got that, so, maybe you can try using justify-content: space-between which will align your items in the row leaving them equally spaced plus flex-basis: 25% (to certify that there will be always 4 items in a row, change de % as you wish) that is supposed to work for all your lines except the last one. For the last one you can use a css selector (like last-child) and set its property to flex-grow: 0 / flex-shrink:0 (solving one of your problems, if you used flex: 1 1 25% instead of flex-basis) and also align-self: flex-start or whatever you like

You could try it with a fixed-with-pseudo-element:

You can specify margin-right on every item except the last one in the row of flex-wrap by doing the following:

I was facing the same issue and in fact it's really simple. No need to put some SCSS and or jQuery.

You just need to specify a maximum number of "square", and make a modulo to know if that match with your maxNumber. If its not, you just have to define a quick function that increment your number until that modulo return 0.

When you have your number you just have to loop your html. For me I was coding on ReactNative:

If you dont want content (backgroundColor: 'red') in my case you juste have to make it 'transparent'.