css flex-box 包含额外内部元素的空间

Question

edit1：我刚刚注意到，如果我“设备工具栏”来更改宽度，我可以减少额外的空间......但前提是我的“屏幕”宽度恰好达到这 3 个项目的宽度。

我对 css 非常陌生，反应也相对较新，但一直在学习...

我正在使用 display: flex 在 display: flex 中。我读过如果你让一个弹性盒子的元素有宽度：100% 它将移动到下一行。这对我来说非常有效。我移到下一行的是另一个 display:flex 容器...它有 3 个项目。出于某种原因，它将外部容器扩展到其中 4 个项目的宽度。如果我添加一个项目并转到 4 个项目......它的宽度为 4。

使用开发人员工具，我将鼠标悬停在上面，它非常清楚地显示了这个“死区”......但我没有相应的 html 元素。我只有现有项目的 div。

这是我的内部 flex 容器的声明

display: flex;
align-items: flex-start;
flex-direction: row;
flex-wrap: wrap;
width: 100%;

这是外面的

width: 100%;
font-weight: "bold";
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
background-color: rgba(225, 0, 255, 0.178);
padding: 0.5rem;
margin: 1rem 0;

这是我使用开发人员工具将鼠标悬停在内部容器上的照片。请让我知道还有什么可以帮助诊断此问题...或者在哪里阅读以了解正在发生的事情。

https://imgur.com/a/xzGUTVC

目标是让内部容器根据其中包含的项目数来决定外部容器的宽度（没有额外的项目间距）

Answer 1

为此，您需要将 flex 容器中的 width 从 100% 更改为 fit-content。如果width: 100% 这意味着容器扩展为完全可见宽度，因此您可以看到空白空间。替换为fit-content 修复此问题。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body {
  text-align: center;
  padding: 0px;
  margin: 0px;
  background: grey;
  justify-content: stretch;
}

.container,
.container2 {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  border: 1px solid wheat;
}

.container {
  width: 100%;
}

.container2 {
  width: fit-content;
  width: -moz-fit-content;
}

.item {
  --border-radius: 5px;
  font-weight: 'bold';
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  background-color: rgba(225, 0, 255, 0.178);
  padding: 0.5rem;
  margin: 1rem 0;
  border-radius: var(--border-radius);
}

.box {
  width: 30px;
  height: 30px;
  background: orange;
  border-radius: var(--border-radius);
}

h3 {
  font-size: 0.8rem;
}

<div class="container">
  <div class="item">
    <h3>subcomponent1</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent2</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent3</h3>
    <div class="box"></div>
  </div>
</div>
<div class="container2">
  <div class="item">
    <h3>subcomponent1</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent2</h3>
    <div class="box"></div>
  </div>
  <div class="item">
    <h3>subcomponent3</h3>
    <div class="box"></div>
  </div>
</div>