隐藏多列

时间:2016-02-25 09:51:55

标签: html css css3 flexbox

我已经构建了一个模仿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;
  }

w98 like menu with overflowing borders

1 个答案:

答案 0 :(得分: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