為什麼輸入和按鈕元素在 Flex 容器中的行為不總是符合預期？

Flex 容器中輸入和按鈕元素的問題

Flex 容器中的輸入和按鈕元素可能無法以預期回應 Flex 屬性。這是由於輸入元素的固有行為造成的，輸入元素具有預設寬度設定。

輸入元素的預設寬度

與沒有固有寬度的 div 元素不同，輸入元素由瀏覽器分配預設寬度。這個寬度會導致 flex 屬性無法正常生效。

預設寬度說明

下圖示範了輸入元素的預設寬度：

[帶有藍色邊框的輸入元素的圖像，顯表示預設寬度]

如圖所示，瀏覽器自動給出輸入寬度，防止其在Flex 容器內按預期縮小或增長。

解決方案：覆蓋預設寬度

要解決此問題，請覆蓋預設寬度使用CSS 的輸入元素：

input {
  width: 100%;
  flex: 1;
}

這將允許輸入元素在Flex 容器內縮小或成長，如下所示有意為之。

以上是為什麼輸入和按鈕元素在 Flex 容器中的行為不總是符合預期？的詳細內容。更多資訊請關注PHP中文網其他相關文章！