Javascript FlexBox列布局旁边的溢出指示器解决方案？

我想澄清一下这个问题，以防它不能立即澄清——但我们不需要提供仅CSS的解决方案。该项目将由数据驱动，我们完全可以引入JS来帮助解决此问题。

---

你好非常感谢您抽出时间来看我

简言之，我们有一个有趣的问题，我们想补充FlexBox列布局，使用我们称之为“溢出指示器”的功能在某些点中断内容

看看这个：

我也尝试过围绕这个做一些例子，但不可否认，我更像是一个用户体验设计师，而不是开发人员，请看这里：（我接近了吗？）

var detectWrap=函数（类名）{
var wrappedItems=[]；
var previitem={}；
var currItem={}；
var items=document.getElementsByClassName（className）；
对于（变量i=0；icurrItem.top）{
wrappedItems.push（项目[i]）；
}
PreviItem=当前项目；
};
返回包装件；
}
window.onload=函数（事件）{
var wrappedItems=detectRap（'block'）；
for（var k=0；k
*{
框大小：边框框；
字体系列：无衬线；
}
分区集装箱{
填充：15px0；
背景色：黑色；
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
柔性包装：包装；
宽度：1024px；
高度：400px；
保证金：0自动；
}  
div.container>div{
利润率：0.15px；
宽度：33.3%；
}
.页眉，.页脚{
填充物：5px；
背景色：#333；
颜色：白色；
文本转换：大写；
字体大小：10px；
}
.项目{
背景色：#e1e1；
填充：15px；
}
隔套{
背景色：透明！重要；
高度：15px；
}
包扎{
颜色：白色；
背景色：红色；
}

第1行标题
第2行标题
项目1
项目2
项目3
试验
标题2
项目1
项目2
项目3
项目4
项目5
试验
嗯，（与
弹性盒不同）
的设计基本上是为了满足您的要求及其功能

不过，有几点需要注意：

CSS为您提供了列流，因此我不确定您在跨列时是否会获得指示器。我还在调查

web的创建实际上并没有考虑“分页”，因此将内容拆分为多个列容器可能不起作用。您可以很容易地添加更多列并滚动容器

列示例

.columns{
利润率：30像素；
栏目：3个；
}
.项目{
填充：4px；
背景：ddd；
}
标题，
页脚，
李{
显示：块；
填充：20px；
保证金：0；
背景：#333；
颜色：#eee；
}
页脚{
边缘底部：10px；
}
保险商实验室{
保证金：0；
填充：0；
}
李{
列表样式：无；
边框底部：1px实心#ddd；
背景：#eee；
颜色：#333；
}
标题，
页脚，
李：第一个孩子，
李：最后一个孩子{
-webkit列内部中断：避免；
内部分页符：避免；
破门而入：避免；
}

标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚
标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚
标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚
标题

项目
项目
项目
项目
项目
项目
项目
项目
项目
项目

页脚
要在flexbox中实现该设计，您需要使用技巧。确保添加具有较低z索引的伪元素，并使该元素具有装饰性背景。在这种情况下，所有物品都会像瓷砖一样落在屋顶上。我用下面的三角形做了个例子，但同样的方法也可以用于上面的装饰。注意：对于顶部装饰，问题仍然是开放的（我在pseudo类之前尝试了：：，z-index对此不起作用）。
下面是下部装饰的工作示例：


CSS:

HTML:


标题1
项目1
项目2
项目3
项目4
页脚
标题1
项目1
项目2
项目3
项目4
项目5
项目6
项目7
项目8
页脚

我在这里使用了pattern generator：

你为什么不先给我们一些html和css作为参考呢point@Keith添加了一些我一直在使用的代码。非常感谢，我们将看看我们能做些什么Hanks Bryce！摇滚明星。到目前为止，这看起来还不错。很多这些原则我都不知道。几个问题：*看起来这需要先填写列？在跳转到下一列之前，有没有想过这将如何填充一列的可用垂直不动产？*作为伪元素存储的指示符是创造性的。我确实想知道，通过一些JS注入这些功能是否会更好，因为它们除了允许根据概述的规则应用一些逻辑之外，还允许应用一些逻辑。您的想法是什么？@cclark413您可以指定一个高度，但默认设置是在所有列之间流动内容。有一个设置来平衡柱高度或仅从顶部/左侧填充。我认为JS路由可能是必需的，但它有一些缺点，比如需要重新计算


.flex-container {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: flex-start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  -webkit-align-content: stretch;
  -ms-flex-line-pack: stretch;
  align-content: stretch;
  -webkit-align-items: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  height: 180px;
  background-color: #000;
}

.flex-item {
  -webkit-order: 0;
  -ms-flex-order: 0;
  order: 0;
  -webkit-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
  align-self: auto;
  margin-left: 5px;
}

.header,
.footer {
  background-color: #333;
  color: white;
  text-transform: uppercase;
  font-size: 10px;
  padding: 15px;
}
.header {
  margin-top:-5px;
}
.footer {
  z-index: 5;

  transform: translate(0px, -5px);
}

.item {
  padding-top: 5px;
  background-color: #e1e1e1;
  z-index: 5;
}

.item:after {
  display: inline-block;
  height: 5px;
  content: " ";
  width: 100%;
  z-index: 4;
  transform: translate(0px, 8px);
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAQElEQVQoU2N8+PDhfwYiACO6Qnl5eQwxkDkogiBFMMPRDYArRFaETTFYITZF6IrhVuHzD8gwohSCPUNEyICVAADpLCXVkRgaFQAAAABJRU5ErkJggg==)
    repeat;
}

.spacer {
  background-color: transparent;
  height: 10px;
}


<div class="flex-container">

  <div class="item flex-item panel-1">
    <div class="header">Header 1
    </div>Item 1</div>
  <div class="item flex-item panel-1">Item 2</div>
  <div class="item flex-item panel-1">Item 3</div>
  <div class="flex-item ">
    <div class="item panel-1">Item 4</div>
    <div class="footer">Footer</div>
    <div class="spacer"></div>
  </div>
  <div class="item flex-item panel-1">
    <div class="header">Header 1
    </div>Item 1</div>
  <div class="item flex-item panel-1">Item 2</div>
  <div class="item flex-item panel-1">Item 3</div>
  <div class="item flex-item panel-1">Item 4</div>
  <div class="item flex-item panel-1">Item 5</div>
  <div class="item flex-item panel-1">Item 6</div>
  <div class="item flex-item panel-1">Item 7</div>
  <div class="flex-item ">
    <div class="item panel-1">Item 8</div>
    <div class="footer">Footer</div>
    <div class="spacer"></div>
  </div>
</div>