CSS 在 flexbox 中启用水平滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23691645/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Enabling horizontal scroll in flexbox
提问by designerNProgrammer
I am new to flexbox, and I am trying to make a horizontal scrolling website. The idea is to show the first item as 100% height and width, like covering the screen with the remaining items to the right side, which will only be shown when I scroll.
我是 flexbox 的新手，我正在尝试制作一个水平滚动的网站。这个想法是将第一个项目显示为 100% 的高度和宽度，就像用右侧的剩余项目覆盖屏幕一样，只有在我滚动时才会显示。
Here is an image of what I am trying to do:
这是我正在尝试做的事情的图像：
I tried setting the first item to 100% width, but it's still fitted just like other items.
我尝试将第一个项目设置为 100% 宽度，但它仍然像其他项目一样适合。
Here is my CSS code:
这是我的 CSS 代码：
body
{
margin: 0;
padding: 0;
background-color: rgb(242, 242, 242);
}
.flex-container
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-flow:row;
height:100%;
position:absolute;
width:100%;
/*flex-wrap:wrap;*/
}
.box
{
padding: 20px;
color:white;
font-size:22px;
background-color: crimson;
border:1px solid white;
flex:1;
-webkit-flex:1;
text-align:center;
min-width:200px;
}
.splash
{
background-image: url(1.jpg);
width:100%;
background-size:cover;
background-position:50% 50%;
background-repeat: no-repeat;
transition: all 0.6s ease;
flex:10;
-webkit-flex:10;
}
.flex1:hover
{
flex:4;
-webkit-flex:4;
}
And my HTML code:
还有我的 HTML 代码：
<div class="flex-container">
<div class="box splash">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
回答by dholbert
Flex items have "flex-shrink: 1" by default. If you want the first item to fill the container and force the others to overflow (as it sounds like you do), then you need to set "flex-shrink: 0" on it.
默认情况下，Flex 项目具有“flex-shrink: 1”。如果您希望第一个项目填满容器并强制其他项目溢出（听起来像您这样做），那么您需要在其上设置“flex-shrink: 0”。
The best way to do this is via the "flex" shorthand, which you're already using to give it "flex: 10".
最好的方法是通过“flex”简写，你已经用它来给它“flex：10”。
Just replace that with flex: 10 0 auto-- the '0' there gives it a flex-shrink of 0, which prevents it from shrinking below the width:100%that you've given it.
只需将其替换为flex: 10 0 auto- 那里的 '0' 赋予它 0 的 flex-shrink 值，这可以防止它收缩到width:100%您给定的值以下。
Perhaps better: just give it flex: none, since I don't think you're really getting any benefit from the "10" there, since there's no free space to distribute anyway, so the "10" is giving you 10 useless shares of nothing.
也许更好：就给它flex: none，因为我认为你并没有真正从那里的“10”中获得任何好处，因为无论如何都没有可用的空间来分发，所以“10”给了你 10 个无用的份额。
So that makes your 'splash' rule into this:
所以这使你的“飞溅”规则变成了这样：
.splash {
background-image: url(1.jpg);
width:100%;
background-size:cover;
background-position:50% 50%;
background-repeat: no-repeat;
transition: all 0.6s ease;
flex:none;
}
Here's a fiddle with this change (but otherwise using your provided CSS/HTML). This renders like your mock-up in Firefox Nightly and Chrome: http://jsfiddle.net/EVAXW/
这是此更改的一个小提琴（但否则使用您提供的 CSS/HTML）。这就像您在 Firefox Nightly 和 Chrome 中的模型一样：http: //jsfiddle.net/EVAXW/
回答by mrwagaba
I think I got a better way - especially when you're creating a horizontal scrolling carousel:
我想我有一个更好的方法 - 特别是当你创建一个水平滚动轮播时：
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
overflow-x: auto;
}
.item {
/*how you style this doesn't really matter - depends on your requirements - but essentially you want the items to span full width, and that's the default (every flex container item has flex-grow set to 1)*/
}
Take not here: I changed the direction to columnso that flex-wrapnow wraps horizontally. Also, you can change overflow-xto hiddenif you don't want the scrollbar to show - but don't omit the overflow-x property since that means it will be the outter parent to now overflow (something I wouldn't find desirable)
不在这里：我改变了方向，column以便flex-wrap现在水平包裹。此外，如果您不希望滚动条显示，您可以更改overflow-x为hidden- 但不要省略 overflow-x 属性，因为这意味着它将成为现在溢出的外部父级（我认为这是不想要的）
The JS can then kick in.
然后 JS 就可以开始工作了。
Cheers
干杯
