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

Question

我有一个水平导航，它将拥有可变数量的链接。对于这个特例，我有3个，如下所示：

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

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

这是我目前正在使用的CSS：

auto

Answer 1

使用网格，您需要一条规则：“将所有列设置为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布局

这适用于明确或无限数量的弹性项目。

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>