Html 如何删除css flex中的最后一个空白

我在我的项目中使用css flex，但它在项目的末尾添加了一个空框。如何删除它

我的代码

<div className="form-horizontal">
  <div className="form-control">
    <label htmlFor="">Name</label>
    <input type="text" name="" id="" />
  </div>
  <div className="form-control">
     <label htmlFor="">Email</label>
     <input type="text" name="" id="" />
  </div>
</div>

---

试试这个。这应该能解决你的问题

.form-control {
  width: 100%;
}

---

以及

显示：flex

将使其中的子元素具有内联显示，因此它们将彼此粘着，除非您使用

对齐内容

或

对齐项目

将它们分开

现在，如果您有两个元素（子元素），它们的组合宽度仍然小于容器盒（父元素）的宽度，那么缺少的其余宽度仍然存在，只是它没有被使用！（因为您需要维护页面的外观/设计）

但这并不意味着您的flex blox中有一个新框。这只是自由空间，没有被使用

---

现在，您仍然可以通过

justify content

或

align items

属性使用那里的可用空间，或者您可以向flex blox添加一个新的子元素

请显示您的CSS以及。

.form-control {
  width: 100%;
}