Question

我是flexbox的新手，我正在尝试制作横向滚动网站。这个想法是将第一个项目显示为100％的高度和宽度，就像覆盖屏幕一样，剩下的项目位于右侧，只有在滚动时才会显示。

这是我想要做的事情的图像： enter image description here

我尝试将第一项设置为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>

Answer 1

Flex项目默认为“flex-shrink：1”。如果你想要第一个项目填充容器并强制其他项目溢出（听起来像你这样做），那么你需要在它上面设置“flex-shrink：0”。

最好的方法是通过“flex”速记，你已经用它来“flex：10”。

只需将其替换为flex: 10 0 auto - '0'就会给它一个0的弹性收缩，这可以防止它缩小到你给它的width:100%以下。

也许更好：只要给它flex: none，因为我不认为你真的从那里得到了“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/

Answer 2

您只需将所有 flex 属性设置为父 div 并添加“overflow:auto”并在父集的子 div 中设置“flex-shrink : 0”----所有将被设置see code example in image

Answer 3

我认为我有更好的方法-尤其是在创建水平滚动轮播时：

.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)*/
}

在此处不采取行动：我将方向更改为column，以便flex-wrap现在水平缠绕。另外，如果您不希望显示滚动条，也可以将overflow-x更改为hidden-但不要忽略overflow-x属性，因为这意味着它将成为当前溢出的外部父对象（我觉得不理想的东西）

然后JS可以加入。

欢呼

在flexbox中启用水平滚动

3 个答案: