Why does it not fix the centering of the two blocks(flex)?

Hello.
Typeset menu, there is a problem at the stage of adding adaptive that element. There are several brekpoint on which the menu is "squeezed" depending on screen size and centering works:
5df019737ec80378723296.png

But when you go to breakpoint 768, there is a significant change. In the picture above there are two "global" block - logo and menu + information. By 768 the menu is hidden (display: none) can only block with information and given property:
.topLine nav .item-2 .row ul {
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 flex-direction: column;
 -webkit-box-align: start;
 align-items: flex-start;
}

 .topLine nav .item-2 .row .info {
 margin-bottom: 0;
 display: -webkit-box;
 display: flex;
 flex-wrap: wrap;
 align-content: space-evenly;
 }

And the blocks attached to it
.topLine nav .item-2 .row .info__phone
 .topLine nav .item-2 .row .info__watch,
 .topLine nav .item-2 .row .info__email
 .topLine nav .item-2 .row .info__address {
 -webkit-box-flex: 50%;
 flex: 50%;
 }

What would they perestroiki 2 rows. But it goes astray alignment:
5df01aa45946e460554089.png

On the screen tried to show that the alignment strays do not have "global" blocks (logo and menu/info), and nested block elements .info (nailing them to the top). Tried the unit .info to give the property justify-content: center (since the elements instead of the row become column and the main and lateral axis has changed), but th-t not take off :(

I understand that where something messed up with the Flex (vertical alignment, but can't figure out where. Put the piece in the sandbox.
April 3rd 20 at 17:24
1 answer
April 3rd 20 at 17:26
Solution
If you need to align horizontally that in li: https://jsfiddle.net/mer8qykb/2/
Do you still have a lot of the same classes that style before, changing only the background, this is the place where you need to duplicate the code, and to use modifiers, since there BEM.
@rowena.O, okay :) thanks. - noemy commented on April 3rd 20 at 17:41
Maybe you mean width? Just this css generated from sass (I tried to move it sass, but apparently since I use it together with the smart grid...in the sandbox "make" failed, so skopipastil css). Here's a piece that is sass
spoiler
$arrays: phone, watch, email, address
 @each $item in $arrays
&__#{$item}:before
 content: "
 background: url('../image/top-line/info/#{$item}.png') no-repeat
 height: 17px
 display: inline-block
 margin-right: 10px
 position: relative
 top: 3px
+to(850px)
 margin-right: 5px
 top: 4px

&__phone:before
 width: 9px
&__watch:before
 width: 17px
&__email:before
 width: 23px
&__address:before
 width: 17px


If preprocessor I was poking around about a week, here BEM became juzat even later. Can some suggest how to solve the problem by BEM (considering that using the preprocessor).
The move could not figure out how to redo it. Even if you write a mixin that sets the desired width, the code will look like the same, but instead of rigidly predetermined width will be used mixin with a desired width.

Or you had something else? - noemy commented on April 3rd 20 at 17:29
@onie.Wol, do the sandbox with the SASS in Codepen, where you can choose the preprocessor, he collects himself.
And no, I'm not talking about width. In the example - the bug is fixed? It had to align? - lamar_Veum commented on April 3rd 20 at 17:32
@rowena.O, I tried to connect the sass does not work, when trying to run instead of layout get a 502 error. Do not understand why.

Yes, level the wanted, thank you. - noemy commented on April 3rd 20 at 17:35
@onie.Wol, if briefly, what I mean: you have icons, the code which is duplicated, changing only the background, you need to make a single item icons, and change the background modifier for the icons.

Ie something like this: class="icon icon--watch" - lamar_Veum commented on April 3rd 20 at 17:38

Find more questions by tags CSSFlexbox