html – 灵活项目的宽度正在减少

概述我正在尝试制作一个可在移动设备中水平滚动的导航菜单.为此,我想使用flexbox来做,但是当我设置移动视图时,导航项的宽度会减少. 我尝试使用flex-grow和flex-basis属性将它们分别设置为1和0,但它不起作用. 在这种情况下,我使用导航部分的虚拟名称,但它们可以具有不同的长度. ul { display: flex; margin: 0; padding: 0; li 我正在尝试制作一个可在移动设备中水平滚动的导航菜单.为此,我想使用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 sample

解决方法 请记住,flex容器的初始设置是flex-shrink：1.

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

要禁用此功能,请使用flex-shrink：0.

那么,对于你的李,你可以试试这个(速记版)：

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

更多细节：What are the differences between flex-basis and width?

总结

以上是内存溢出为你收集整理的html – 灵活项目的宽度正在减少全部内容，希望文章能够帮你解决html – 灵活项目的宽度正在减少所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。