flexbox 属性在指定了 max-width 和 flex grow 的嵌套 flexbox 中不起作用答案

【问题标题】：flexbox property not working inside nested flexbox whose max-width and flex grow is specifiedflexbox 属性在指定了 max-width 和 flex grow 的嵌套 flexbox 中不起作用
【发布时间】：2022-01-04 21:20:11
【问题描述】：

我正在学习 CSS 并尝试使用 flexbox 制作导航栏。使用嵌套的 flexbox，但是“display: flex;”财产在 ul 中不起作用。我试图找出 chrome 检查工具的问题，并且在 ul 中禁用了“display: flex”属性。

nav {
    font-size: 1.5em;
    display: flex;
    justify-content: space-between; 
  }
  
  ul {
    border: 1px solid black;
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: space-evenly;
  }
  
  
  ul, li {
    display: inline;
    padding: 0;
    margin: 0;
  }

    <nav>
      <a> Home </a>
      <ul>
        <li><a>Products</a></li>
        <li><a>Pricing</a></li>
        <li><a>About</a></li>
        <li><a>Contact</a></li>
      </ul>
      <a> Sign In </a>
    </nav>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

正因为如此：

 ul, li {
    display: inline;   <-----
    padding: 0;
    margin: 0;
  }

在下面的行中（声明的顺序是相关的），您将 ul's display: flexbox 更改为 display: inline。

这种方式应该可行:)

li {
    display: inline;
    padding: 0;
    margin: 0;
  }

【讨论】：

感谢您的帮助。它奏效了。