css - flexbox 中并排的三个元素

Question

我正在尝试使用 flexbox 并排放置三个元素，但是 align-self 属性没有任何效果。我没有在父级 (#subnav-cont) 上使用 space-around 或 space-between，因为每个元素都需要单独定位因为最左边的元素 (#site-logo) 并不总是存在。

回顾一下，#site-logo 应该放在最左边(如果存在)，#site-links 应该居中相对于其父项，#nav-social 应该位于最右侧。

演示:http://codepen.io/ourcore/pen/jyBNzZ

#subnav {
  z-index: 99999999;
  width: 100%;
  overflow: auto;
  font-size: 1.1rem;
  background-color: yellow;
}
#subnav #subnav-cont {
  display: flex;
  margin: 0 auto;
  padding: 0 1.5%;
  max-width: 1280px;
  background-color: red;
}
#subnav #subnav-cont #site-logo {
  align-self: flex-start;
  padding: 10px 0;
  height: 50px;
}
#subnav #subnav-cont #site-logo img {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 30px;
}
#subnav #subnav-cont > ul li {
  display: inline-block;
  padding: 0 20px;
  height: 50px;
  font-size: 1em;
  line-height: 50px;
  white-space: nowrap;
}
#subnav #subnav-cont #nav-links {
  align-self: center;
}
#subnav #subnav-cont #nav-social {
  align-self: flex-end;
}
#subnav #subnav-cont #nav-social li {
  padding: 0 5px;
}

<nav id="subnav">
  <div id="subnav-cont">
    <div id="site-logo">
      <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    </div>
    <ul id="nav-links">
      <li>
        <a href="#" class="subnav-link">Link</a>
      </li>
      <li>
        <a href="#" class="subnav-link">Link</a>
      </li>
      <li>
        <a href="#" class="subnav-link">Link</a>
      </li>
      <li>
        <a href="#" class="subnav-link">Link</a>
      </li>
    </ul>
    <ul id="nav-social">
      <li>
        <a href="#" class="icon-facebook">Facebook</a>
      </li>
      <li>
        <a href="#" class="icon-twitter">Twitter</a>
      </li>
      <li>
        <a href="#" class="icon-instagram">Instagram</a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

您正在寻找 justify-self 但在 flexbox 中不存在。 align-self 在交叉轴上工作。

试试这个:

#nav-links {
  margin: auto;
}

codepen

如果您需要 #nav-links 在 #subnav-con 中居中，无论其他两个元素是否存在以及它们的宽度如何。您可以将其设置为 position: absolute; 以及其他调整。

#nav-links {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

codepen