Question

我试图制作一个可在移动设备中水平滚动的导航菜单。要做到这一点，我想使用flexbox来做，但是当我设置移动视图时，导航项的宽度会减少。

我尝试使用flex-grow和flex-basis属性将它们分别设置为1和0，但它不起作用。

在这种情况下，我使用虚拟名称作为导航部分，但它们的长度可能不同。

＆＃13;

ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #f2f2f2;
  overflow-y: hidden;
  overflow-x: auto;
}

li {
  flex-grow: 1;
  flex-basis: 0;
  margin-left: 10px;
}

＆＃13;

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

＆＃13;

Codepen sample

Answer 1

请记住，Flex容器的初始设置为flex-shrink: 1。

这意味着，默认情况下，Flex项目可以缩小。这可以防止它们溢出容器。

要停用此功能，请使用flex-shrink: 0。

所以，对于你的li，你可以尝试这个（简写版）：

flex: 1 0 auto  (can grow, cannot shrink, initial main size based on content)

此处提供更多详细信息： What are the differences between flex-basis and width?

弹性项目的宽度正在减少

1 个答案: