My logo moves to the left when you insert menu blocks on the right. How to solve a problem? So that the logo does not float 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; }

enter image description here

  • Logo picture with static width? Or what? - Vyacheslav Potseluyko
  • one
    Add html code. - edem

2 answers 2

In this case, flexbox is working as it should. It is required to maintain the same distance between the elements during space-between . To avoid this, you need to pull the logo out of context, for example, using position: absolute :

Jsbin

 .container { background-color: yellow; display: flex; justify-content: space-between; position: relative; width: 100%; } .container > div { background-color: steelblue; border-radius: 5px; color: white; padding: 10px; text-align: center; } .logo { position: absolute; left: calc(50% - 50px); width: 100px; } .menu { width: 200px; } 
 <section class="container"> <div> 1 </div> <div class="logo"> 2 </div> <div class="menu"> 3 </div> </section>

    You probably already solved your problem in one way or another, but since the message is raised by the Spirit of the community, I can not participate.

    All that is required is to add an additional wrapper for the logo (in HTML) and add styles to it that stretch this wrapper to the full height and width and then center the inner element.

     header { display: flex; padding: 15px; border: 1px solid #ccc; justify-content: space-between; position: relative; } menu, button { position: relative; z-index: 1; } .logo { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 100%; height: 100%; display: flex; } .logo a { margin: auto; } 
     <header> <button>button</button> <span class="logo"> <a href="/">LG</a> </span> <menu> <a href="#">menu 1</a> <a href="#">menu 2</a> <a href="#">menu 3</a> <a href="#">menu 4</a> </menu> </header>