为什么我不能更改 flex 项目的大小？

Question

这是我的代码

html {
  box-sizing: border-box;
}

* {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

header nav ul {
  display: flex;
  list-style: none;
  justify-content: center;
  align-items: center;
  height: 3em;
  background-color: #783F27;
}

.naviga {
  border: solid medium;
  border-radius: 0.4em;
  margin: 0 0.5em;
  width: 10em;
  color: goldenrod;
}

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Learning</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <header>
    <nav>
      <ul>
        <li><a class="naviga" href="">Menu</a></li>
        <li><a class="naviga" href="">News</a></li>
        <li><a class="naviga" href="">About</a></li>
        <li><a class="naviga" href="">Contact</a></li>
      </ul>
    </nav>
  </header>
</body>

</html>

即使我指定 width: 10em，<li> 元素显示宽度为 min-content（或 max-content，在本例中相同）。如果我指定 height，也会发生同样的事情。这是为什么？

Answer 1

我想，我还没有运行代码，但看起来这可能是问题所在？

 html {
    box-sizing: border-box;
   }
   * {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
   }

您为整个文档定义了两次框大小。尝试删除其中之一，我会测试您的代码，然后返回给您更多详细信息。

我会建议 box-sizing: border-box;对于 * 并将其从 html {} 元素

中删除

此外，像这样将显示属性添加到导航的 css 并且它有效。

.naviga {
  display: flex;
    border: solid medium;
    border-radius: 0.4em;
    margin: 0 0.5em;
    width: 200px;
    color: goldenrod;
}

Answer 2

flex 属性设置灵活项目的灵活长度。 flex: 0 0 40%

Answer 3

您应该更改 li 的宽度，而不是 a 标签，请参阅下面的示例

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Learning</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
    box-sizing: border-box;
}
* {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

header nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    height: 3em;
    background-color: #783F27;
}
.naviga {
    color: goldenrod;
}
.liClass {
    border: solid goldenrod;
    border-radius: 0.4em;
    margin: 0 0.5em;
    width: 20em;
}
</style>
</head>

<body>

<header>
  <nav>
    <ul>
      <li class="liClass"><a class="naviga" href="">Menu</a></li>
      <li class="liClass"><a class="naviga" href="">News</a></li>
      <li class="liClass"><a class="naviga" href="">About</a></li>
      <li class="liClass"><a class="naviga" href="">Contact</a></li>
    </ul>
  </nav>
</header>

</body>

</html>

为什么我不能更改 flex 项目的大小？

Why can't I change flex items size?

html

css

height

width

flexbox