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

Answer 2

align-self 在这种情况下垂直调整项目。

这是你要找的吗？

另外，为了使其正常工作，#site-logo 和 #nav-social 需要等宽，如果不是，#nav-links 需要以另一种方式定位，即position: absolute

#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 {
  flex: 1;
  padding: 10px 0;
  height: 50px;
  /*visibility: hidden;*/
  text-align: left;
}
#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 {
  flex: 2;
  text-align: center;
}
#subnav #subnav-cont #nav-social {
  flex: 1;
  text-align: right;
}
#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>