입력 및 버튼 요소에서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!