Question

我在使用margin: 0 auto;定位固定位置的flexbox时遇到了问题。我可以将位置更改为相对位置以使其看起来像我想要的，但是固定是我希望的。

HTML

<header class="header l-container">
    <div class="site-title"> <a href="#" class="link">Home</a></div>
    <nav class="nav-box">
        <ul class="menu-box">
            <li><a href="about.html" class="about link">About</a></li>
            <li><a href="/blog/" class="blog link">Blog</a></li>
            <li><a href="contact.html" class="contact link">Contact</a></li>
        </ul>
    </nav>
</header>

CSS

/* change position into relative or fixed */

.header {
  position: fixed;
    z-index: 100;
}


/* some other settings below */

.l-container { 
    margin: 0 auto;
    padding: 0 6rem;
    max-width: 108rem;
}

.header,
.menu-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.header {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

  .site-title .link {
      float: left;
  }

  .menu-box .link {
      float: right;
  }




ul {list-style: none;}
li {margin-left: 20px;}
.link {font-size: 20px;}

注意：我想将整个.header容器居中，并使用flexbox将.site-title和.nav-box分开.header的两端。

Answer 1

如何将left: 0和right: 0添加到固定.header？仍会应用max-width，margin和padding，但它会从左侧和右侧定位。

JSBin

.header {
  position: fixed;
  z-index: 100;
  left: 0;
  right: 0;
}

Answer 2

它会起作用

{{1}}

无法使固定位置的Flexbox居中：$ auto

2 个答案:

JSBin