私の目標:
Googleのように水平スクロールカルーセルを作成します(画像を参照)
検索後、これらのリンクは良い出発点を提供しました:
私はflexboxを以前に使用したことがありません。私の直感はflex-direction:row
とdisplay:inline-flex
を設定する必要があることです。
使用する必要がある他のCSSプロパティに関するアイデアはありますか?本当にありがたいです。
フレックスコンテナー
display: flex
flex-wrap: nowrap;
overflow: auto;
-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-growthとflex-shrinkの値として0が必要であり、flex-basedプロパティはautoに設定できます。
.item {
flex: 0 0 auto;
}
ここにいくつかの例を含むスニペットを投稿しています。それが役に立てば幸い!
.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>
Andi Smith flexbox-carouselもご覧ください。
http://www.andismith.com/flexbox-carousel/
http://www.andismith.com/blog/2012/05/css3-flexbox-carousel/