How to center a logo with flexbox?

Question

css

I get the logo moving to the left when you insert menu blocks from the right. How to solve the problem? To keep the logo from floating back and forth? Here is the code itself:
.header { width: 1260px; margin: 0 auto; height: 350px; display:flex; justify-content: space-between; align-items: baseline; }

Answer 1

This will not work with Flexbox, you either need to make a logo with absolute positioning, or blocks with buttons

Answer 2

I think so https://jsfiddle.net/505r9d25/

Answer 3

What do you need? What would the logo be immediately to the left of the menu? Then set it to margin-left: auto;
A if you need the logo to always be on the right, regardless of the menu, then add either to it order: 1or to the rest of the elements, but don't add anything to the logo. I don't remember exactly how :)