解决 Flex 子元素居中,溢出滚动后被裁切的问题

原文转载自 「保罗的小宇宙」 ( https://paugram.com/coding/fix-flex-overflow-problem.html ) By Paul

预计阅读时间 0 分钟(共 0 个字, 0 张图片, 0 个链接)

晚上修改了 小窝 页面右侧目录树的定位,并且修改了二级导航栏的布局。其原有的设计采用的是 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% 约束最大宽度,就会在手机上出现滚动条而不会溢出了!

max-content.jpg

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

手机上则是横向滚动.jpg

more_vert