在 flexbox 中启用水平滚动 [英] Enabling horizontal scroll in flexbox

问题描述

我是 flexbox 的新手，我正在尝试制作一个水平滚动的网站.这个想法是将第一个项目显示为 100% 的高度和宽度，就像用右侧剩余的项目覆盖屏幕一样，只有在我滚动时才会显示.

这是我正在尝试做的事情的图像:

我尝试将第一个项目设置为 100% 宽度，但它仍然像其他项目一样适合.

这是我的 CSS 代码:

 正文{边距:0；填充:0；背景颜色:rgb(242, 242, 242);}.flex 容器{显示:-webkit-box；显示:-moz-box；显示:-ms-flexbox；显示:-webkit-flex；显示:弹性；弹性流:行；高度:100%；位置:绝对；宽度:100%；/* flex-wrap:wrap;*/}.盒子{填充:20px；白颜色;字体大小:22px；背景颜色:深红色；边框:1px纯白色；弹性:1;-webkit-flex:1;文字对齐:居中；最小宽度:200px；}.溅{背景图片:网址(1.jpg)；宽度:100%；背景尺寸:封面；背景位置:50% 50%；背景重复:不重复；过渡:所有 0.6s 缓和；弹性:10；-webkit-flex:10;}.flex1:悬停{弹性:4；-webkit-flex:4;}

还有我的 HTML 代码:

<div class="box splash">1</div><div class="box">2</div><div class="box">3</div><div class="box">4</div>

解决方案

默认情况下，Flex 项目具有flex-shrink: 1".如果您希望第一个项目填满容器并强制其他项目溢出(听起来像您这样做)，那么您需要在其上设置flex-shrink: 0".

最好的方法是通过flex"简写，你已经用它来给它flex: 10".

只需将其替换为 flex: 10 0 auto -- 那里的0"使其 flex-shrink 为 0，从而防止其缩小到 width:100% 你给的.

也许更好:只需给它 flex: none，因为我认为您不会真正从那里的10"中获得任何好处，因为无论如何都没有可用的空间来分发，所以10"是给你 10 个无用的份额.

所以这使您的飞溅"规则变成了这样:

.splash {背景图片:网址(1.jpg)；宽度:100%；背景尺寸:封面；背景位置:50% 50%；背景重复:不重复；过渡:所有 0.6s 缓和；弹性:无；}

这里有一个关于此更改的小提琴(但使用您提供的 CSS/HTML).这就像你在 Firefox Nightly 和 Chrome 中的模型一样:http://jsfiddle.net/EVAXW/

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.

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.

Here is my CSS code:

    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:

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

解决方案

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.

The best way to do this is via the "flex" shorthand, which you're already using to give it "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.

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.

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/

这篇关于在 flexbox 中启用水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！