css - float 第一个列表项在左侧，其余列表项在右侧(使用flexbox)

我一直在尽力解决个人网页上的标题。当前，它看起来像这样：



如您所见，我有一个简单的段落，左边有“ ZH”。然后，在徽标的右边直接有三个列表项。我想要做的是将三个列表项浮动到右侧，就像这样：



这是当前生成的HTML：

<ul class="nav">
        <a class="navbar-brand" href="http://localhost:8888/wordpress/">
            <p>ZH</p>
        </a>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
        </li>
        <li class="nav-item">
            <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
        </li>
</ul>

这是ul.nav的当前CSS：

.nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

无论如何，无需更改html标记即可执行此操作？任何帮助将不胜感激。

最佳答案

如果包裹justify-content: space-between来创建两个flex-item，则可以使用.nav上的li来做到这一点，然后将它们尽可能远地放置：

ul {
  list-style: none;
}

.nav {
  display: -ms-flexbox;
  display: flex;
  justify-content: space-between; /* horizontal alignment / places first flex-item (child) far left and last far right, i.e. max. space between them */
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.flex-container {
  display: flex;
}

.flex-container > li {
  margin: 0 5px; /* adjust */
}

<div class="nav">
  <a class="navbar-brand" href="http://localhost:8888/wordpress/">
    <p>ZH</p>
  </a>
  <ul class="flex-container">
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/about/" role="button">About</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" href="http://localhost:8888/wordpress/projects/" role="button">Projects</a>
    </li>
    <li class="nav-item">
      <a class="btn btn-lg nav-link" target="_blank" href="http://localhost:8888/wordpress/wp-content/themes/zachary_hughes_wordpress/assets/hughes_zachary_cv.pdf" role="button">Resume</a>
    </li>
  </ul>
</div>

我已经使用ul元素来包装li和一个div作为外部flex-container。

关于css - float 第一个列表项在左侧，其余列表项在右侧(使用flexbox)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48258021/