这篇文章上次修改于 1029 天前,可能其部分内容已经发生变化,如有疑问可询问作者。

晚上修改了 小窝 页面右侧目录树的定位,并且修改了二级导航栏的布局。其原有的设计采用的是 display: flex + justify-content: center 进行居中的,但这样也遇到了一个问题。如果我使用 white-space: nowrap 禁止文字换行(Flex 默认也是不换行,但是并不会溢出,而是会使得子元素宽度变窄导致文字被换行),并结合 overflow: auto 来使得内容出现滚动条,则会出现左侧被“裁切”掉的效果。

上网搜索了一番,出现这个效果的原因,主要是因为 Flex 居中对齐的特性造成的。当内容被强制不换行后,无论是否设定 overflow: auto,左侧区域由于居中的原因就变成“溢出”区域了,又由于设定了 overflow: auto 的缘故,右侧就还是正常显示的。

为了解决这个问题,我试了一个方案,就是万能的 margin: auto。它可以让任何内容横向居中对齐。但问题来了,Flex 占用了 100% 的宽度,有没有什么宽度可以让它根据内容自动调整?width: max-content 这个属性就迎刃而解,它就可以实现这样的效果!再加上 max-width: 100% 约束最大宽度,就会在手机上出现滚动条而不会溢出了!

.navigation{
    margin: auto;
    display: flex;
    overflow: auto;
    max-width: 100%;
    width: max-content;
    white-space: nowrap;
    margin-bottom: 2.5em;
}

max-content.jpg

你可能会问,这完全不就是多此一举吗?把子元素全部 display: inline-block,父元素 text-align: center 不就好了 🐎 ?没错,这招确实可以,但是如果 HTML 在编写的时候内容存在换行,则会出现间距不统一的问题,因此 Flex 才是更好的实践!

手机上则是横向滚动.jpg

如果你担心 max-content 的兼容性,那么试试这一招?把 Flex 的 width 定义取消,里面的第一个子元素设置成 margin-left: auto,最后一个子元素设置成 margin-right: auto 也可以实现居中且不影响滚动的效果!

.navigation{
    display: flex;
    overflow: auto;
    max-width: 100%;
    white-space: nowrap;
    margin-bottom: 2.5em;
}

.navigation a:first-child{
    margin-left: auto;
}

.navigation a:last-child{
    margin-right: auto;
}