Question

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

总结一下，#site-logo应该位于最左侧（当存在时），#site-links应该与其父级相关，#nav-social应该坐在最右边。

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

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

在这种情况下，

window.resolveLocalFileSystemURL(data, function (fileEntry) { fileEntry.file(function (fileObj) { var reader = new FileReader(); reader.onloadend = function (evt) { base64StringDocument = evt.target.result.match(/,(.*)$/)[1]; }; reader.readAsDataURL(fileObj); }, function (error) { console.log('get fileEntry error: ' + error.message); }); }, function (error) { console.log('resolve error: ' + error.message); });会垂直调整项目。

这是你在找什么？

另外，为了使其正常工作，align-self和#site-logo都需要宽度相等，如果不是，#nav-social需要以另一种方式定位，即{ {1}}

#nav-links

position: absolute

Flexbox中并排的三个元素

2 个答案: