為什麼 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中文網其他相關文章！