如何使用 flexbox 制作水平滾動輪播？

Question

我的目標：

像谷歌一樣制作水平滾動輪播（見圖）

搜索后，這些鏈接提供了一個良好的開端：

• 在 Flexbox 中啟用水平滾動
• Flexbox 指南

我以前從未使用過 flexbox。 我的預感是我需要設置flex-direction:row和display:inline-flex 。

關於我需要使用哪些其他 CSS 屬性的任何想法？ 我真的很感激。

Answer 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/