为什么 Flex 和 Flex-Grow 不能处理我的输入和按钮元素？

Flex 和 Flex-Grow 对输入和按钮元素不起作用

在 Flexbox 中，可以使用以下方式调整容器内元素的大小和位置flex 和 flex-grow 属性。但是，当应用于输入和按钮元素时，这些属性似乎无法按预期工作。

原因：

与 DIV 不同，输入和按钮元素具有默认宽度和覆盖 Flexbox 的高度设置

插图：

[显示浏览器为输入元素分配的默认宽度的图像]

如图所示，浏览器会自动设置输入元素的宽度，即使没有任何 CSS 样式

解决方案：

要允许 Flexbox 控制输入和按钮元素的大小，需要删除默认的宽度和高度设置：

input, button {
  width: auto;
  height: auto;
}

删除这些默认设置后，flex 和 flex-grow 属性应该按预期生效。

以上是为什么 Flex 和 Flex-Grow 不能处理我的输入和按钮元素？的详细内容。更多信息请关注PHP中文网其他相关文章！