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);
}
Company logo
Company logo
Company logo
你也可以看看Andi Smith flexBox-carousel：
扫一扫
1834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
