css – 如何使用flexbox制作水平滚动轮播？

我的目标：

像谷歌一样制作水平滚动旋转木马(见图)

搜索后,这些链接提供了一个良好的开端：

> Enabling Horizontal Scrolling in
Flexbox
> A Guide to Flexbox

我以前从未使用过flexBox.我的预感是我需要设置flex-direction：行和显示：inline-flex.

关于我需要使用的其他CSS属性的任何想法？我真的很感激.

解决方法

FlexBox水平转盘：

Flex容器

>使容器显示：flex
>物品不包装：flex-wrap：Nowrap;
>允许区域滚动：溢出：自动;
>动量&易于使用的iOS：-webkit-overflow-scrolling属性;
> 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项目

每个项目需要弹性增长和flex-shrink值为0,并且基于flex的属性可以设置为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,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,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/

原文地址：https://www.jb51.cc/css/242133.html