html - 使用 CSS Grid 将最后一项固定在水平导航菜单的右侧

Question

我有一个水平导航，其中包含可变数量的链接。对于这个特定示例，我有 3 个，如下所示:

我希望前 2 个保持原样，第 3 个一直放在右边。我能够弄清楚如何做到这一点的唯一方法是在链接上设置宽度，如下所示: grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); 然后将以下内容添加到我想要的元素末尾:grid-column-end: -1;

这样可行，但我不希望所有链接的宽度都相同。我希望将宽度设置为 auto，但是我没有跨越整个宽度的隐式网格，因此似乎无法将第 3 个链接放在导航栏。有没有一种相对简单的方法可以使用 CSS Grid 完成此操作？如果没有，我怎么能用 Flexbox 做到这一点？我想避免使用 float 和绝对定位。

这是我目前使用的 CSS:

ul.nav {
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  justify-content: start;
  grid-gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

Answer 1

对于 Grid，您需要这样的规则:“将所有列设置为 auto，无论数字如何，但最后一列设置为 1fr”。然后将最后一个网格项设置为 margin-left: auto。

但是，我在 current Grid spec 中什么也没有看到(级别 1)允许您定位未知数量的列中的最后一列。

据我所知，这无法通过 grid-template-columns、grid-auto-columns 或其组合来完成。

然而，使用 flexbox 布局很简单。只需将最后一项设置为 margin-left: auto。

---

网格布局

对于一定数量的列，这就是它的工作方式。

将前两列设置为auto，即使用内容长度。

将第三列设置为1fr，即:

1. 消耗线路上的所有可用空间，并且
2. 将前两列固定到左侧。

然后使用 auto 边距将第三个链接(网格项)固定到右侧(在第三列的空间内)。

nav {
  display: grid;
  grid-template-columns: auto auto 1fr;
}

a:last-child {
  margin-left: auto;
}

/* demo styles */
nav { background-color: lightgray ; border: 1px solid gray; padding: 5px 0; }
a   { background-color: lightgreen; border: 1px solid gray; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</nav>

flex 布局

这就是它对确定或不确定数量的 flex 元素的工作方式。

nav {
  display: flex;
}

a:last-child {
  margin-left: auto;
}

/* demo styles */
nav { background-color: lightgray ; border: 1px solid gray;  padding: 5px 0; }
a   { background-color: lightgreen; border: 1px solid gray; }

<nav>
  <a>Link 1</a>
  <a>Link 2</a>
  <a>Link 3</a>
</nav>