我已经构建了一个模仿Windows98开始菜单的网页菜单。该菜单有一个关键功能 - 它具有固定的高度和列宽。如果项目数溢出可用空间,则会在前一个项目旁边创建一个新列。 Flexbox的完美工作。
我需要每列项目的边框。左/右边框没问题。但是,顶部/底部边框会溢出实际列。
如何解决这个问题?使用flexbox执行此任务是否正确?
.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;
}
答案 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;
}