css CSS flexbox用于水平滚动导航#flexbox

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css CSS flexbox用于水平滚动导航#flexbox相关的知识,希望对你有一定的参考价值。

/*
[1]: Make a flex container so all our items align as necessary
[2]: Prevent items from wrapping
[3]: Automatic overflow means a scroll bar won’t be present if it isn’t needed
[4]: Make it smooth scrolling on iOS devices
[5]: Hide the ugly scrollbars in Edge until the scrollable area is hovered
[6]: Hide the scroll bar in WebKit browsers
*/
 .scroll {
  display: flex; /* [1] */
  flex-wrap: nowrap; /* [1] */
  overflow-x: auto; /* [1] */
  -webkit-overflow-scrolling: touch; /* [4] */
  -ms-overflow-style: -ms-autohiding-scrollbar; /* [5] */ 
}

/* [6] */
.scroll::-webkit-scrollbar {
  display: none; 
}

/*
CSS: for the items
Each item needs a flex-grow and flex-shrink value of 0. The flex-basis property can be a percentage or pixel value if you for some reason need items to be of a specific width.
*/

.item {
  flex: 0 0 auto; 
}

以上是关于css CSS flexbox用于水平滚动导航#flexbox的主要内容,如果未能解决你的问题,请参考以下文章

CSS flexbox布局在Safari中不起作用

用于页眉、粘滞页脚和垂直对齐的中间内容的 CSS Flexbox 或 CSS 网格?

CSS Flexbox 居中对齐

css 使用flexbox水平居中

Flexbox CSS 不适用于 Safari

仅使用 flexbox CSS 的水平砌体布局[重复]