Question

我尝试使用弹性布局制作登录内容，就像一个图标和一行输入一样。我用图标和width:20px的输入设置了height:20px和width:100%。我认为它将输入以覆盖除特定值以外的所有其余宽度。结果是图标的大小已更改。

通过进一步了解flex，我知道了另一种实现方法，例如通过输入或设置flex:1的图标来min-width/height，但是我只想知道为什么{{1 }}影响同级图标的大小。

width:100%

.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>的大小变为.icon，23.33*24和width都改变了。

Answer 1

这归因于 box-sizing 。您的width和height修改实际上不是来自flexbox，而是由于width: 72%结合边界得出的计算结果。请注意，如果您拿走border: 2px solid green上的.icon，则.icon height将返回到指定的20px。

如果要阻止这些调整，可以设置box-sizing: border-box，这将使.icon的{{1}} 20px 包括边框和填充计算：

width

我建议使用全局选择器* { box-sizing: border: box; }将其应用于 all 个元素，实际上，建议设置此设置，因为它使元素大小计算更易于使用，并且事实上，大多数框架默认都包含此声明。

* {
  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;
}

为什么Flexbox使用特定值更改div的宽度

1 个答案: