在 flexbox 中启用水平滚动答案

【问题标题】：Enabling horizontal scroll in flexbox在 flexbox 中启用水平滚动
【发布时间】：2014-07-04 16:36:37
【问题描述】：

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

【问题讨论】：

标签： css flexbox

【解决方案1】：

默认情况下，Flex 项目具有“flex-shrink: 1”。如果您希望第一个项目填充容器并强制其他项目溢出（听起来像您所做的那样），那么您需要在其上设置“flex-shrink：0”。

最好的方法是通过“flex”简写，你已经用它来给它“flex: 10”。

只需将其替换为flex: 10 0 auto —— '0' 给它的 flex-shrink 为 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/

【讨论】：

不过，.flex-container 的宽度等于父级的 100%，而不是整个内容的宽度。

【解决方案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 就可以启动了。

干杯

【讨论】：

【解决方案3】：

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

【讨论】：

您的解决方案对我有用！但是请写代码而不是截图:)

【解决方案4】：

您可以将Parent或Container的位置设置为Relative，将其中的child设置为absolute。

    .Parent{
    display: flex;
    // and use any flexbox property
    width: 100%;
    height: 100%
    

    position: relative; // important point
    overflow: auto;
    }
    
    .Child{
    position: absolute; // important point
    }

【讨论】：