柔性物品的宽度正在减小

Question

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

我尝试使用flex-grow和flex-basis性能将它们设置为1与0分别,但没有奏效.

在这种情况下,我使用导航部分的虚拟名称,但它们可以具有不同的长度.

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;
}

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

Codepen样本

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)

更多细节:flex-basis和width之间有什么区别？