Question

我是Flexbox的新手，但我想我可以使用它制作一个包含6列的自适应导航菜单。我遇到的问题是它会拉伸100％的屏幕，但在大多数情况下，按钮的宽度不相等。有没有什么方法可以让按钮宽度相等，并且仍然可以根据屏幕尺寸和字体大小做出响应？

请参阅此代码：JS Fiddle

.cat-bg {
    display: flex;
}
.showSingle {
    flex-grow: 1;
    max-width: 30%;
    float: left;
    cursor: pointer;
    cursor: hand;
    display: block;
}

Answer 1

默认情况下，flex对象的大小将根据其内容进行调整。您可以通过调整flex-basis属性来更改此设置。在您的情况下，您可以使所有列/按钮的大小相同：

.showSingle {
  flex: 1;
}

（而不是flex-grow: 1）

另请注意，您应删除float和display语句以及两个cursor语句之一。所以这些元素的最终CSS应该是：

.cat-bg {
  display: flex;
}

.showSingle {
  flex: 1;
  max-width: 30%;
  cursor: pointer;
}

对于它的价值，这种情况下的简写flex属性等同于以下内容：

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;

Answer 2

只需将flex-basis: 0;添加到.showSingle。

https://jsfiddle.net/3mgr14v4/

Answer 3

使用此

root

Answer 4

我想我找到了如何纠正它：

.cat-bg {
 max-width: 100%;
  margin: 0 auto;
  display: flex;
}
.showSingle {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  cursor: pointer;
  cursor: hand;
  display: block;
}

Flexbox 6列宽度相等

4 个答案: