What happens with flexbox (tired of thinking)?

Question

What happens with flexbox (tired of thinking)?

Hi all.
I don't know, I can not understand where such a joint in flexbox.
https://jsfiddle.net/webirus/t8x2o7yy/3/

.header .wrapper {
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 justify-content: space-between;
 align-items: center;
 align-content: space-between;
}

The red blocks should be aligned from the edges.
That is, the first must be directly to the left, the second centered, the third in the fence to the right edge.
This we have indicated right justify-content: space-between;
In fact it turns out that space between "turns" in space-around.

But it does not work in this writing.

If I remove clearfix from

then all works well.
Clean up is no problem, but what's wrong with clearfix'om and how it "breaks" Flex?

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

The usual kind of design, using for a long time it.
But with the Flex the first time blew me off.

Any ideas?)

caleb_Stehr asked July 9th 19 at 13:24

More answers about "What happens with flexbox (tired of thinking)?"

1 answer

karina59 answered on · Accepted Answer · 2019-07-09T13:26:58.209Z

karina59 answered on July 9th 19 at 13:26

Solution

Here is the explanation and fix

The left edge rules, right indented as well. - caleb_Stehr commented on July 9th 19 at 13:29

: can working version to show? - karina59 commented on July 9th 19 at 13:32

: sorry, my bad. I did not read the manual. table killed and all the rules. thank you) - caleb_Stehr commented on July 9th 19 at 13:35

: the truth is now clearfix not working))) I'll fix to write for a specific flake - caleb_Stehr commented on July 9th 19 at 13:38

but I don't see how You did in the end. I have standards if display: none: to put after/before, here's an example: https://jsfiddle.net/t8x2o7yy/7/ - karina59 commented on July 9th 19 at 13:41

: or if we remove content and display: table - karina59 commented on July 9th 19 at 13:44

in principle it is possible to roll the fix/crutch check if the browser supports flexbox, then add a clearfix after/before display: none. If not supported, nothing to touch. - karina59 commented on July 9th 19 at 13:47

: pours clearfix all
https://jsfiddle.net/webirus/t8x2o7yy/8/ - caleb_Stehr commented on July 9th 19 at 13:50

Essentially means removing clearfix from the wrapper, but as practice shows, it is very there are always needed without it going to something else. So looking for a solution here. - caleb_Stehr commented on July 9th 19 at 13:53

: so I say that either the flake or the clearfix. - karina59 commented on July 9th 19 at 13:56

: why? If You browser supports flex, then remove the clearfix and all. Everywhere in other places will be the Flex and everything is OK - karina59 commented on July 9th 19 at 13:59

: well, there must be a solution))) live in an interesting age) to make friends want to) if it does not, I will do for the mind))))))) - caleb_Stehr commented on July 9th 19 at 14:02

: decisions should not be, because the current behavior is correct. Doing after and before they begin to taken into account. If they are empty and not displayed, then they are not and the browser does not recalculate anything. So the only solution is to do the mind) - karina59 commented on July 9th 19 at 14:05

: well, with the first block did)))) - caleb_Stehr commented on July 9th 19 at 14:08

not work. after and before remained to appear, just both moved to the right side, after these 3 blocks. See for yourself via the inspector - karina59 commented on July 9th 19 at 14:11