代码之家 › 专栏 › 技术社区 › dkrasniy

Flexbox换行仅第一列,带溢出滚动

flexboxgrid css-grid flexbox css javascript

1

dkrasniy · 技术社区 · 7 年前

我目前正在使用flex和flex-direction行来表示一行具有固定宽度的项目,这会导致溢出和一个水平滚动条,这正是我想要的。

然而,我需要这些行中的第一列是全宽的,而其余的项目则通过水平滚动来显示。这就是为什么我不能使用wrap。

页面如下: http://dkrasniy.com/open-enroll/scrollable.html

注: 全宽标题应仅位于“移动”视口上。

“日历年免赔额”下有行标题“个人”&“家庭”。这些是在移动设备上需要全速移动的设备。

谢谢

1 回复 | 直到 7 年前

1

Cathy 7 年前

澄清后编辑:

我相信您所要求的是flex容器中的所有同级,除了第一个在一条线上的同级。问题是flex包装始终位于父/包含元素上,因此除非将非rowheader元素包装在另一个容器中,否则我看不到使用flexbox实现这一点的方法。

您可以添加这样的包装器,然后添加以下css:

.flex-row {
  flex-wrap: wrap;
}
.innerrow {
  display: flex;
  flex: 100%;
  overflow-x: scroll;
  max-width: 100vw;
}

<div role="row" class="d-flex flex-row compare-container">

                <div role="rowheader" class="col-3 single-row-label">Individual</div>
                <div class="innerrow">
                  <div role="cell" class="col-3 plan-col _1 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _2 data-point">$0</div>
                  <div role="cell" class="col-3 plan-col _3 data-point">$10</div>
                  <div role="cell" class="col-3 plan-col _4 data-point">$25</div>
                  <div role="cell" class="col-3 plan-col _5 data-point">$25</div>
                </div>
            </div>

原件:

如果没有jsbin,我建议您(在您需要的任何媒体查询中)这样做:

从中删除左侧:0。单行标签
添加最大宽度:100vw;溢出-x:滚动;到弹性行