How to align content when using flex?

Question

css

Faced such a problem. I make myself a horizontal navigation menu. It is divided initially into 3 zones.
The main block with the design of the menu. And then nested:
1 block - logo
2 block - text buttons
3 block - control icons

All 3 blocks should divide the total size of the menu depending on the fullness of each of them.
In theory, the content should be distributed like this:
The logo is in the first block and is aligned to the left.
The text buttons in the second block should be in the center of the menu.
And then comes the third block and in it the content should be aligned to its right edge.

I chose flexbox for implementation.
And everything seems to be working fine. Except that if I place a block block in the third block, then the right alignment works, and if I try to place an inline-block block there, the alignment stops working. And I need to place icons in a row there. That is, the blocks must be in one row. What am I doing wrong?



Here in the third column the block is displayed as it should now, but if it is made display-inline, then the alignment will be on the left side.

Answer 1

Examine the justify-content property.
https://developer.mozilla.org/ru/docs/Web/CSS/just...
And you can also add display:flex to the third block, then the inner inline-block will not be needed.