html - 为什么 flexbox 会用特定值改变我的 div 的宽度

Question

<分区>

Answer 1

这是由于 box-sizing 。你的width和 height修改实际上不是来自 flexbox，而是由于来自 width: 72% 的计算与边界相结合。请注意，如果您带走 border: 2px solid green在 .icon , .icon height会返回指定的20px .

如果你想阻止这些调整，你可以设置box-sizing: border-box , 这将使 .icon的 20px width 包括所有边框和填充计算:

* {
  box-sizing: border: box;
}

我建议将此应用到具有全局选择器 * 的所有 元素, 实际上通常推荐设置它，因为它使元素大小计算更容易处理，而且事实上大多数框架默认包含此声明。

* {
  box-sizing: border-box;
}

.parent {
  width: 72%;
  height: 100px;
  border: 1px solid lightblue;
  display: flex;
  align-items: center;
}

.icon {
  width: 20px;
  height: 20px;
  border: 2px solid green;
  display: block;
}

.login {
  width: 100%;
}

.login::placeholder {
  width: 91px;
}

<div class="parent">
  <div class="icon"></div>
  <input class="login" placeholder="place input your invite code" />
</div>