html - 可滚动区域的中心元素

Question

如何在可滚动的水平 flex 容器中居中对齐第一个和最后一个 flex 元素？

让滚动开始工作很容易。

我的容器有:

scroll-snap-type: x mandatory;
overflow-x: scroll;

和元素有:

scroll-snap-align: center;

滚动有效，但是列表中最左侧和最右侧的元素始终分别与左侧和右侧对齐。

我想让第一个和最后一个元素也能够在可滚动元素列表中居中。

如果我们看 this例如“主页”选项卡是最左边的元素。我想把它放在可滚动区域的中心。

我需要在可滚动区域的左侧和右侧有空白标签吗？

感谢您的任何建议。

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>

Answer 1

Do I need to have blank tabs on the left and right of the scrollable area?

这不是一个坏主意。

你可以在两端创建一堆“假”元素，然后给它们 visibility: hidden .

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

div.scrollmenu a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

/* NEW */
a:nth-child(-n + 5),
a:nth-last-child(-n + 5) {
  background-color: green;
  visibility: hidden;

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
  <a href="#home">Home</a>
</div>

但是，有一个更简单且在语义上更有值(value)的解决方案:使用 CSS 伪元素。

由于您只关注布局的外观，因此不应篡改 HTML。你应该坚持使用纯 CSS。

从 pseudo-elements on a flex container are treated as flex items ，您可以使用 ::before (自然流中的第一项)和 ::after (自然流中的最后一项)来创建您需要的居中效果。

div.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
  display: flex;
}

div.scrollmenu a {
  color: white;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

div.scrollmenu a:hover {
  background-color: #777;
}

/* NEW */
.scrollmenu::before,
.scrollmenu::after {
  content: "";
  flex: 0 0 50%;
}

<div class="scrollmenu">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="#support">Support</a>
  <a href="#blog">Blog</a>
  <a href="#tools">Tools</a>
  <a href="#base">Base</a>
  <a href="#custom">Custom</a>
  <a href="#more">More</a>
  <a href="#logo">Logo</a>
  <a href="#friends">Friends</a>
  <a href="#partners">Partners</a>
  <a href="#people">People</a>
  <a href="#work">Work</a>
</div>