Inconsistent margin between flex items on last row

Question

I'm using flex. There seems to be an unexpected margin difference between two div elements - the third row has a different margin between the divs than the first two rows:

How do I amend the code so that the third row's margin is the same as the first two rows?

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.container:after {
  flex: 1;
  content: '';
}

.container form {
  width: 100%;
  display: flex;
}

.container .comment {
  flex: 1;
}

.square {
  padding: 10px;
  width: calc(100% / 9);
  margin: 0.7vw 0 0.7% 1vw;
  background: red;
}

<div class="container">
  <form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
    <input class="comment" type="text">
    <input type="submit">
  </form>

  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
  <div class="square">
  </div>
</div>

JsFiddle: https://jsfiddle.net/4ydyoqmx/

Answer 1

The problem is that your pseudo-element is consuming all available space on the last row.

Yes, this is done to neutralize the effect of justify-content: space-between on two flex items, which causes them to appear on opposite ends...

... but it also kills the proportional spacing that space-between provides when the items fill the row.

Until the flex specification is revised with specific last-row alignment properties, you could implement a hack that solves this problem:

Add invisible flex items after the last real item.

In the example below, I've added seven phantom items to your code.

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

/*
.container:after {
  flex: 1;
  content: '';
}
*/

.invisible { visibility: hidden; }

.container form {
  width: 100%;
  display: flex;
}

.container .comment {
  flex: 1;
}

.square {
  padding: 10px;
  width: calc(100% / 9);
  margin: 0.7vw 0 0.7% 1vw;
  background: red;
}

<div class="container">
  <form method="post" style="margin: 0.7vw 0 0.7% 1vw;">
    <input class="comment" type="text">
    <input type="submit">
  </form>

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
  <div class="square invisible"></div>
</div>

Revised Fiddle

More information:

• flex-grow not sizing flex items as expected
• Properly sizing and aligning the flex item(s) on the last row

---

Sidenote

There's a good chance you'll encounter some trouble with this rule:

.square { margin: 0.7vw 0 0.7% 1vw; }

The flexbox specification advises against using percentage margin and padding in a flex container.

Authors should avoid using percentages in paddings or margins on flex items entirely, as they will get different behavior in different browsers.

Here's some more:

4.2. Flex Item Margins and Paddings

Percentage margins and paddings on flex items can be resolved against either:

• their own axis (left/right percentages resolve against width, top/bottom resolve against height), or,
• the inline axis (left/right/top/bottom percentages all resolve against width)

A User Agent must choose one of these two behaviors.

Note: This variance sucks, but it accurately captures the current state of the world (no consensus among implementations, and no consensus within the CSSWG). It is the CSSWG’s intention that browsers will converge on one of the behaviors, at which time the spec will be amended.

Answer 2

There is a few different ways of doing this, depending on how you want the "squares" to respond:

flex-grow:

.square {
    flex-grow: 1;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/2/

inline-block:

.square {
    display: inline-block;
    padding: 10px;
    width: calc(100% / 9);
    margin: 0.7vw 0 0.7% 1vw;
    background: red;
}

Fiddle: https://jsfiddle.net/4ydyoqmx/4/

Third Option:

Removed content: '' from .container:after because that was causing problems

Answer 3

It's the justify-content: space-between setting on .container which does this (in conjunction with flex-wrap: wrap;): It evently distributes the elements in those lines that are filled, but in the last line that would not look good, so it leaves the predefined / default margin between those elements. (That's similar to a justified text paragraph)

One possibility to avoid this is to simply erase justify-content: space-between, thereby setting it to the defaultleftalignment (but they won't be distributed across the whole width anymore):

https://jsfiddle.net/h8ejaob7/

Answer 4

It is doing like that because you're justifying content using space between. So on the screen it can not accommodate 7th div so it puts only 6 div on screen and puts equal space between 6 div elements.But in the last line there has only 2 div's so that means your 3rd line is not fully filled with div elements. That's why it is not putting space as it did on upper line's div's .

If you put 4 more div's then you'll get exact effect as it has on upper line's .

Answer 5

This problem could be solved by adding this piece code to your css..

*{margin:0px;
padding:0px}

Hope it works..