私の目標:
Google のような水平スクロールカルーセルを作成します (画像を参照)
検索した後、次のリンクがよい出発点となりました:
flex-direction:row
これまでフレックスボックスを使ったことはありません。と を設定する必要があるのではないかと思いますdisplay:inline-flex
。
他にどのような CSS プロパティを使用する必要があるかについてのアイデアはありますか? 非常にありがたいです。
ベストアンサー1
Flexbox 水平カルーセル:
フレックスコンテナ
- コンテナを作る
display: flex
- 商品が包装されていないことを確認してください:
flex-wrap: nowrap;
- 領域をスクロールできるようにします:
overflow: auto;
- 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-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/