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

Question

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

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

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

这是我目前正在使用的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，您需要一个规则："set all columns to auto regardless of number, but the last column to 1fr"。然后将最后一个网格项设置为margin-left: auto.

但是，我在 current Grid spec（级别 1）中没有看到允许您定位未知列数中的最后一列的任何内容。

据我所知，grid-template-columns、grid-auto-columns 或其组合无法做到这一点。

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

网格布局

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

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

将第三列设为1fr，即：

消耗掉线上所有空闲的space，并且
将前两列固定到左侧。

然后使用 auto 边距将第三个 link（网格项）固定到右侧（在第三列的 space 内）。

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>

灵活布局

这就是它对确定或不确定数量的弹性项目的工作方式。

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>

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

Pin the last item to the right in a horizontal navigation menu using CSS Grid

html

css

flexbox

css-grid

网格布局

灵活布局