Created
May 27, 2019 02:05
-
-
Save supremeo/b66ef6e13aa13fb595600eff026d5d99 to your computer and use it in GitHub Desktop.
CSS flexbox for horizontal scrolling navigation #flexbox
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| [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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment