我目前正在使用 flex 和 flex-direction 行来处理具有固定宽度的项目行,这会导致溢出和水平滚动条,这就是我正在寻找的。
但是,我需要这些行中的第一列是全角的,而其余项目则随着水平滚动而流动。这就是为什么我不能使用包装。
这是页面:http ://dkrasniy.com/open-enroll/scrollable.html
注意:全角标题只能在移动视口上。
在“日历年免赔额”下,有“个人”和“家庭”行标题。这些是在移动设备上需要全宽的那些。
谢谢
我目前正在使用 flex 和 flex-direction 行来处理具有固定宽度的项目行,这会导致溢出和水平滚动条,这就是我正在寻找的。
但是,我需要这些行中的第一列是全角的,而其余项目则随着水平滚动而流动。这就是为什么我不能使用包装。
这是页面:http ://dkrasniy.com/open-enroll/scrollable.html
注意:全角标题只能在移动视口上。
在“日历年免赔额”下,有“个人”和“家庭”行标题。这些是在移动设备上需要全宽的那些。
谢谢
澄清后编辑:
我相信你所要求的是一个 flex 容器中的所有兄弟姐妹,除了第一个在一行上。问题在于 flex-wrap 始终位于父元素/包含元素上,因此除非您将非行头元素包装在另一个容器中,否则我看不到使用 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,我建议您这样做(在您需要的任何媒体查询中):