简体   繁体   中英

Inconsistent margin between flex items on last row

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/

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:


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.

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

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 default left alignment (but they won't be distributed across the whole width anymore):

https://jsfiddle.net/h8ejaob7/

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 .

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

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

Hope it works..

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2025 STACKOOM.COM