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>

1.
2.
3.
4.

弹性项目默认为“弹性收缩：1”。如果您想让第一个项目填满容器并迫使其他项目溢出（听起来像是这样），那么您需要在其上设置“flex shrink:0”

最好的方法是通过“flex”速记，您已经在使用它来表示“flex:10”

只需将其替换为

flex:10 0 auto

——那里的“0”使其flex收缩为0，这可以防止其收缩到您给定的

宽度：100%

以下

也许更好：只给它

flex:none

，因为我不认为你真的从“10”中得到任何好处，因为没有免费的空间来分发，所以“10”是给你10个无用的零份额

因此，您的“飞溅”规则包含以下内容：

.splash{
背景图片：url（1.jpg）；
宽度：100%；
背景尺寸：封面；
背景位置：50%50%；
背景重复：无重复；
过渡期：所有0.6秒缓解；
flex：无；
}

这里有一个修改（但使用您提供的CSS/HTML）。这与Firefox Nightly和Chrome中的实体模型相似：

---

我想我找到了一个更好的方法-尤其是当您创建水平滚动旋转木马时：

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

此处不使用：我将方向更改为

列

，以便

柔性包装

现在水平包装。此外，如果不希望滚动条显示，可以将

overflow-x

更改为

hidden

，但不要忽略overflow-x属性，因为这意味着它将是现在溢出的外部父对象（这是我不希望看到的）

然后JS就可以启动了

---

干杯

不过，

.flex容器的宽度等于父容器的100%，而不是总内容宽度。