How to fit the blocks in the center?

Pliz tell me how to fit 4 blocks in the center of the container?
can't deal with interest margins...
1)container Width = 1220
2)Width unit = 286
3)the Width of all blocks will occupy = 1144
4)Free space = 76 (use under marginy)

you need to make sure that the gaps were the same everywhere.

https://jsfiddle.net/8buzxh0b/
July 9th 19 at 10:45
5 answers
July 9th 19 at 10:47
.content {
 display: flex;
 justify-content: space-between;
 }
And without the Flex any way? the old fashioned way - federico.Moen55 commented on July 9th 19 at 10:50
: Why? Better learn how to use flex. )
If the old-fashioned way, then use tables. - Graham.Bernhard commented on July 9th 19 at 10:53
Like flex now, not all love, have watched jobs , all of the pipe layout in Ie9+ , but the Flex is only supported with 11 if I'm not mistaken. so I have still learning to impose old ways marginale) or not? - federico.Moen55 commented on July 9th 19 at 10:56
: we work below the 10th version of ie is not supported - johnny.Terry commented on July 9th 19 at 10:59
: Why do without Flex?? Vacancies requiring a bit IE9, and you can ignore them.

Long time make up a Flex, no problem. - Lulu_Zulauf71 commented on July 9th 19 at 11:02
In the end, do the flake is beautiful, and for IE9 I small fallback. The path will not be there in the center or distances will not be sustained, but the content will remain available. This is important in modern web (if it is not on the selling page) - Lulu_Zulauf71 commented on July 9th 19 at 11:05
July 9th 19 at 10:49
As an alternative of Flex justify-content: space-between; you can use text-align: justify
.content {
 text-align: justify;
}

.content:after {
 content: ";
 display: inline-block;
 width: 100%;
 height: 0;
 visibility: hidden;
 overflow: hidden;
}

jsfiddle.net/8buzxh0b
Thank you - federico.Moen55 commented on July 9th 19 at 10:52
July 9th 19 at 10:51
Set the indents, and the last use of the pseudo class and get that indentation.
Although glaxy better to use.
July 9th 19 at 10:53
another option, without Flex if necessary.
July 9th 19 at 10:55
And if you do by using margin-right and margin-left, what is the algorithm? let's say if margin will be fixed.
Then - federico.Moen55 commented on July 9th 19 at 10:58
: 74px free space (I Forgot about the frame that is part of the unit, for border-box) , in total 74 / 3 = 24,66666666666667
and you 24.6874 px;
or these fractions do not have much of a difference? - Graham.Bernhard commented on July 9th 19 at 11:01
: thank you - federico.Moen55 commented on July 9th 19 at 11:04

Find more questions by tags HTMLCSS