css – 启用flexbox中的水平滚动

我是flexBox的新手，我正在努力做一个水平的滚动网站。这个想法是将第一个项目显示为100％的高度和宽度，如覆盖屏幕，剩余的项目在右侧，这只会在滚动时显示。

这是我想要做的一个形象：

我尝试将第一个项目设置为100％的宽度，但它仍然像其他项目一样安装。

这是我的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; 
    }

和我的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-shrink为0，这样可以防止它在宽度以下缩小：100％。

也许更好：只是给它flex：没有，因为我不认为你真的从“10”中得到任何好处，因为没有可用的空间分配，所以“10”给你10无用的股份什么都没有。

这样就可以使你的“飞溅”规则成为：

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

css – 启用flexbox中的水平滚动

解决方法

猜你在找的CSS相关文章