慎用justify-content等于center

• 抖音：https://v.douyin.com/iLWapk4Y/

• B站：https://www.bilibili.com/video/BV1ac411s7zk/

代码：

https://github.com/sunzsh/st-html-demo/blob/master/multi_item_center.html

预览：

https://sunzsh.github.io/html-demos/multi_item_center.html

这是一个能左右滑动的这种推把钮

但是呢注意

如果屏幕变宽的时候

他没有居中

就显得不好看

不知道大家碰到这个需求

会怎么处理哈

因为我用的是Flex布局

所以呢一说到居中

我第一想到的就是这个justify content center

大家看一下

直接就居 中了

很方便对吧

但是注意

我们把它屏幕再拉窄的时候呢

（我把它放到中间哈）大家看

右边没问题

但左边呢

一二按钮已经看不到了

那为什么左边会看不到呢

甚至滚动条也过不去了呢

原因其实就是他用了这个居中之后啊

虽然屏幕的宽度只有这么窄

但是呢内容还是要居中

所以呢左边这点位置

就不能让滚动条再滚过去了

如果滚动条能过去的话

就不是居中了

那怎么处理呢

我们就不用这种剧终方式了

现在是没有居中的对吧

我们可以利用

左右margin为auto的方式来设置

也就是说

我们把按钮一的左边和按钮6的右边

设置成margin auto

大家看，这样就可以了

我们这回再缩小

看看 1-6都能滑到了

那这块样式应该怎么写呢

因为我们未来可能是动态的数量嘛

所以这块不能写死

我们就可以用伪类简单写一下

比如说 :first-child、:last-child

好这样就可以了

只是呢

关于左右margin能实现这种居中的原理

回头我们找一期视频单独来分享一下