帶有FlexBox列布局的溢出指示器解決方案？

Question

我想比較清楚到這個問題的情況下，它是目前尚不清楚-但我們並不需要提供一個CSS唯一的解決辦法。 該項目將以數據為驅動力，我們非常高興地引入JS來幫助協助解決方案。

---

你好！ 非常感謝您抽出寶貴的時間停下來。

簡而言之 ，我們遇到了一個有趣的問題，我們希望通過使用我們稱為“溢出指示器”的功能在某些點中斷內容來補充FlexBox列布局。

看看這個：

我也曾嘗試做一些有關此示例的嘗試，但坦白地說，我比開發人員更像是一個UX設計器，請參見此處：（ 我關閉了嗎？ ）

https://codepen.io/cclark413/pen/XvxbqV

 var detectWrap = function(className) { var wrappedItems = []; var prevItem = {}; var currItem = {}; var items = document.getElementsByClassName(className); for (var i = 0; i < items.length; i++) { currItem = items[i].getBoundingClientRect(); if (prevItem && prevItem.top > currItem.top) { wrappedItems.push(items[i]); } prevItem = currItem; }; return wrappedItems; } window.onload = function(event){ var wrappedItems = detectWrap('block'); for (var k = 0; k < wrappedItems.length; k++) { wrappedItems[k].classList.add("wrapped") wrappedItems[k].innerText= "I wrapped!" } }; 

 * { box-sizing:border-box; font-family:sans-serif; } div.container { padding:15px 0; background-color:black; display: flex; flex-direction: column; align-content: flex-start; flex-wrap: wrap; width:1024px; height:400px; margin:0 auto; } div.container > div { margin:0 15px; width:33.3%; } .header, .footer { padding:5px; background-color:#333; color:white; text-transform:uppercase; font-size:10px; } .item { background-color:#e1e1e1; padding:15px; } div.spacer { background-color:transparent !important; height:15px; } div.wrapped { color:white; background-color: red; } 

 <div class="container"> <div class="header block"> <div class="row"> Row 1 Header </div> <div class="row"> Row 2 Header </div> </div> <div class="item block">Item 1</div> <div class="item block">Item 2</div> <div class="item block">Item 3</div> <div class="footer block">Test</div> <div class="spacer block"></div> <div class="header block">Header 2</div> <div class="item block">Item 1</div> <div class="item block">Item 2</div> <div class="item block">Item 3</div> <div class="item block">Item 4</div> <div class="item block">Item 5</div> <div class="footer block">Test</div> </div> 

但是，我對上述解決方案有一個小問題：-容器中的內容是單獨處理的，而不是“凝結面板”，這限制了我們只能對將要出現的面板進行處理，因此，我們需要找到一種好的方法在各個面板內容因溢出而被破壞之后，提供容器。 我現在只是將所有內容分解為使用本機Flex功能。

Flexbox非常適合讓我們獨占there頭，但是它不夠聰明 ，無法獲取Flex內容並完全利用空間。 我們想通過施加溢出指示器 （在UI中基本上是鋸齒狀的邊緣，看起來好像面板已被撕裂並在新的列中開始）來添加到復雜的請求中

一些規則：

• 這是一個Web界面，當前使用Angular，HTML，CSS。
• 頁眉/頁腳絕對不能獨立。 頁眉應始終與第一個項目在一起，而頁腳應始終與最后一個項目在一起。 以任何其他方式分解面板是可以接受的。
• 我們希望為鋸齒狀邊緣提供一個優雅的解決方案，以便可以將其配置為具有某些背景顏色，以在某些狀態下（例如，“禁用”，“活動”，“已取消”等）與面板的其余部分相匹配-因此，我們不希望基於圖像解決方案，也許不是通用的SVG。
• 雖然我們希望此內容使用分頁解決方案使頁面溢出，但我們仍然希望將來能夠進行水平滾動以查看面板。

甚至可以假設 FlexBox是正確的答案，而不是其他解決方案。 期待看到創造力的解決方案！

Answer 1

嗯， CSS多列布局模塊 （與flex-box ）旨在完成您所要的工作，並且它得到了很好的支持 。

但是有一些警告：

1. CSS會為您執行列流操作，因此我不確定在跨列時是否會得到指示符。 我仍在調查。

2. 網絡的創建並不是真正考慮“分頁”的，因此將內容拆分為多個列式容器可能不起作用。 您可以很容易地添加更多列並滾動容器。

列示例

 .columns { margin: 30px; columns: 3; } .item { padding: 4px; background: #ddd; } header, footer, li { display:block; padding: 20px; margin: 0; background: #333; color: #eee; } footer { margin-bottom: 10px; } ul { margin: 0; padding: 0; } li { list-style: none; border-bottom: 1px solid #ddd; background: #eee; color: #333; } header, footer, ul>li:first-child, ul>li:last-child { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } 

 <div class="columns"> <div class="items"> <!-- using a list to so :first/:last child work --> <!-- probably don't even need the "items" wrapper but it makes everthing a bit cleaner --> <header>Header</header> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <footer>Footer</footer> </div> <div class="items"> <header>Header</header> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <footer>Footer</footer> </div> <div class="items"> <header>Header</header> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <footer>Footer</footer> </div> <div class="items"> <header>Header</header> <ul> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </ul> <footer>Footer</footer> </div> </div> 

編輯：

添加“邊緣到列的第一/最后”

我一直在嘗試使用位於下一個/上一個后面的pseudo-elements來解決列拆分指示器，但是存在一些奇怪的問題。 即，Column容器的行為就好像它有overflow: hidden但是沒有辦法覆蓋它（已知的錯誤）。 選項是使用諸如will-change類的內容創建本地stacking context ，但這帶來了它自己的問題。

您可以按照我在該Codepen中的進度進行操作 。

Answer 2

要在flexbox中實現該設計，您需要使用技巧。 確保您添加具有較低z-index的偽元素，並使該元素具有裝飾背景。 在這種情況下，所有物品都會像瓷磚一樣降落在您的房屋屋頂上。 我以較低的三角形作為示例，但相同的方法也可以用於較高的裝飾。 注意：對於頂級裝飾，問題仍然存在（我在偽類之前嘗試了:: before，而z-index對此不起作用）。 這是下部裝飾的工作示例： https : //codepen.io/emankovski/pen/jONWgpy

CSS：

.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;
}

HTML：

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

我從這里使用了模式生成器： http : //www.patternify.com/