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

问题描述

我是flexbox的新手，我想做一个水平滚动网站。这个想法是将第一个项目显示为100％的高度和宽度，像覆盖屏幕，其余项目在右侧，只有当我滚动显示。

这是我想要做的图片：

我尝试将第一个项目设置为100％宽度，但仍与其他项目一样配合。

这是我的CSS代码：

  body 
 {
 margin：0; 
 padding：0; 
 background-color：rgb（242，242，242）; 
 
} 
 .flex-container 
 {
显示：-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; 
} 
  

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

解决方案

Flex项目有flex-shrink：1默认。如果你想要第一个项目填充容器并强迫其他人溢出（听起来像你一样），那么你需要设置flex-shrink：0。

这是最好的方法是通过flex的速记，你已经使用它给flex：10。

替换为 flex：10 0 auto - '0'有一个flex收缩为0，这防止它收缩低于

也许更好：只需给它 flex：none

code>，因为我不认为你真的从10有任何好处，因为没有可用的空间来分发，所以10给你10个无用的分享。 / p>

这样，你的'splash'规则就是这样：

  .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; 
} 
  

这里有一个小小的改变（但另外使用你提供的CSS / HTML） 。这类似于Firefox Nightly和Chrome中的模型：
http://jsfiddle.net/EVAXW/ p>

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