flex横向排列不换行显示滚动条,内容自动撑开

flex 实现:

div

display: flex;
overflow-x: auto;

span

flex: none;

如果不加 flex: none; 所有的span会自动压缩宽度,以适配当前容器宽度。而这不是我想要的效果。

overflow-x: auto; 与 overflow-x: scroll; 的区别

  • auto: 只有当内容溢出时,才显示滚动条

  • scroll: 无论是否溢出都显示滚动条。主要是为了布局统一,防止滚动条有无导致布局偏差。

效果图:

 

你可能感兴趣的:(html,前端)