如何将可滚动水平 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>
我需要在可滚动区域的左侧和右侧有空白选项卡吗?
这不是一个坏主意。
您可以在两端创建一堆“假”元素,然后给它们
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>
但是,有一个更简单且语义上更有价值的解决方案:使用 CSS 伪元素。
由于您只关注布局的外观,因此不应篡改 HTML。你应该坚持使用纯 CSS。
并且由于弹性容器上的伪元素被视为弹性项目,因此您可以使用
::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>
我使用transform3D 让它工作。我将所有内容放入 Flex 容器中,并使用 Transform3D 和一些 JavaScript 滚动整个容器。 我计算屏幕尺寸并获得屏幕的中心,并进行一些数学计算并计算容器中每个项目的宽度,并知道每个项目索引给了我一个偏移量,然后我做了动画以使用transform3d向左或向右滚动内容。
您可以通过向容器添加填充来确保第一个和最后一个项目居中,该填充等于 50% 减去这些项目的半宽。
.parent {
--child-width: 200px;
padding: 50px calc(50% - var(--child-width)/2);
display: flex;
overflow-x: scroll;
background-color: pink;
}
.child {
min-width: var(--child-width);
height: 50px;
}
.child:nth-child(odd) {
background-color: indianred;
}
.child:nth-child(even) {
background-color: lightcoral;
}
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>