Yes, this is a tricky one, I did try to solve this with just in Flexbox capability but this seems to be one of the flexbox limitations as the solution will always involve a custom CSS. One solution that I came up is to layout a 3 Container Bar (Topbar, Search bar, Social) like you normally would, and have them the Horizontal Flex Layout to End (so the elements will positioned to the right).
Then add the Image/logo in the middle Container and position it to the left with a custom CSS. The CSS property that can possibly do this is the position: absolute;, note that you need to apply this to the Image's Element CSS, not on the Container.
We like to continue on helping you on this but since this requires further complex custom CSS it falls outside the scope of our support.
Thank you for understanding,