隐藏多列

Question

我已经构建了一个模仿Windows98开始菜单的网页菜单。该菜单有一个关键功能 - 它具有固定的高度和列宽。如果项目数溢出可用空间，则会在前一个项目旁边创建一个新列。 Flexbox的完美工作。

我需要每列项目的边框。左/右边框没问题。但是，顶部/底部边框会溢出实际列。

如何解决这个问题？使用flexbox执行此任务是否正确？

Codepen

.w98smenu {
  align-content: flex-start;
  border-top: 1px solid silver;
  border-bottom: 1px solid silver;
  border-left: 1px solid silver;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  margin: 1rem 0;
  max-height: 33rem;
  padding: 0;
}
  .w98smenu li {
    border-right: 1px solid silver;
    cursor: pointer;
    display: block;
    list-style: none;
    margin: 0;
    padding: 0.15rem 0.5rem;
    width: 15rem;
  }
  .w98smenu li:last-child {
    border-bottom: 1px solid silver;
  }

Answer 1

您的演示中有一个引导规则，它为整个容器提供100％的宽度：

.col-xs-12 { width: 100%; }

此规则导致您的顶部和底部边框延长容器的整个长度。

如果删除此规则，则您的Flex容器会缩小到比您的三列更窄的宽度。因此，您的问题仍未解决。这是因为flexbox中存在a flex container does not expand horizontally to accommodate new columns formed by wrapping。

的错误

在我看来，最好的解决方案似乎完美无缺，充分利用了布局的关键特性。特别是固定高度。

由于我们知道高度，因此我们可以确定每列的精确项目数。有了这些知识，我们可以从容器中删除顶部和底部边框，并将它们应用到每列中的顶部和底部弹性项目中：

.w98smenu li:first-child {
  border-top: 1px solid silver;
}

.w98smenu li:last-child {
  border-bottom: 1px solid silver;
}

.w98smenu li:nth-child(18n) {
  border-bottom: 1px solid silver;
}

.w98smenu li:nth-child(18n + 1) {
  border-top: 1px solid silver;
}

Revised Demo