How to make a horizontal scrolling carousel using flexbox? - css

Question

My goal:
Make a horizontal scrolling carousel just like Google (see picture)
After searching, these links provided a good start:
Enabling Horizontal Scrolling in
Flexbox
A Guide to Flexbox
I've never used flexbox before. My hunch is I need to set flex-direction:row and display:inline-flex.
Any ideas on what other CSS properties I need to use? I'd really appreciate it.

Answer 1

Flexbox Horizontal Carousel:
Flex Container
Make the container display: flex
Asure the items don’t wrap: flex-wrap: nowrap;
Allow the area to scroll: overflow: auto;
Momentum & ease of use for iOS: -webkit-overflow-scrolling property;
IE 10, 11 & Edge: -ms-overflow-style: -ms-autohiding-scrollbar;
.container {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
Flex Items
Each item needs a flex-growth and a flex-shrink value of 0, and the flex-based property can be set to auto:
.item {
flex: 0 0 auto;
}
I'm posting here a snippet with few examples. Hope it helps!
.scroll {
display: flex;
flex-wrap: nowrap;
overflow: auto;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.flex {
display: flex;
flex-wrap: nowrap;
}
.logo {
flex: 0 0 120px;
}
.nav-item {
flex: 0 0 auto;
}
.example-three .logo {
display: block;
border: none;
}
.example-three .nav-item {
color: #fff;
}
header {
background: #281a41;
}
.example-one-header, .example-two-header {
border-radius: 3px;
}
.example-three-header {
border-radius: 3px 3px 0 0;
}
.example-three nav {
background: #727c87;
border-radius: 0 0 3px 3px;
}
.logo {
text-align: center;
font-weight: 700;
color: #727c87;
border-right: 1px solid rgba(114, 124, 135, 0.4);
padding: 13px 24px 12px;
}
.logo, .nav-item {
padding: 13px 16px 12px;
}
.logo:not(:last-child), .nav-item:not(:last-child) {
border-right: 1px solid rgba(114, 124, 135, 0.2);
}
* {
box-sizing: border-box;
}
body {
max-width: 360px;
margin: 5% auto;
color: #64cce3;
line-height: 1.5;
}
.logo, .nav-item {
font-size: 14px;
}
.title {
margin: 24px 0 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: .2em;
color: #999;
}
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px #76daff;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.5);
}
<div class="container example-one">
<div class="title">Whole Section scroll</div>
<header class="example-one-header scroll">
<span class="logo">Company Logo</span>
<nav class="flex">
<span class="nav-item">Shop</span>
<span class="nav-item">Portfolio</span>
<span class="nav-item">Downloads</span>
<span class="nav-item">About Us</span>
<span class="nav-item">Contact Us</span>
</nav>
</header>
</div>
<div class="container example-two">
<div class="title">Inside Nav only scrolling</div>
<header class="example-two-header flex">
<span class="logo">Company Logo</span>
<nav class="scroll">
<span class="nav-item">Shop</span>
<span class="nav-item">Portfolio</span>
<span class="nav-item">Downloads</span>
<span class="nav-item">About Us</span>
<span class="nav-item">Contact Us</span>
</nav>
</header>
</div>
<div class="container example-three">
<div class="title">Separated navigation</div>
<header class="example-three-header">
<span class="logo">Company Logo</span>
</header>
<nav class="scroll">
<span class="nav-item">Shop</span>
<span class="nav-item">Portfolio</span>
<span class="nav-item">Downloads</span>
<span class="nav-item">About Us</span>
<span class="nav-item">Contact Us</span>
</nav>
</div>
You can also take a look at Andi Smith flexbox-carousel:
http://www.andismith.com/flexbox-carousel/
http://www.andismith.com/blog/2012/05/css3-flexbox-carousel/