在flexbox中启用水平滚动

Question

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

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

我想我有一个更好的方法 - 特别是当你创建一个水平滚动轮播时：

.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 就可以开始工作了。

干杯

Answer 3

您只需将所有 Flex 属性设置为父 div，并添加“overflow:auto”，并在父 div 的子 div 中设置“flex-shrink : 0”----所有内容都将被设置，请参阅图像中的代码示例