왜 `display: flex`가 ``요소에서 작동하지 않나요?

Fieldset 요소가 Flex 컨테이너로 동작하지 않는 이유

display: flex 또는 display: inline-flex를 사용하여 fieldset 요소 스타일 지정 예상과 다르게 동작하므로 머리가 긁힐 수도 있습니다. 유연한 컨테이너로 작동하는 대신 각각 블록 또는 인라인 블록 요소와 유사하게 동작합니다.

버그 또는 예상 동작?

Firefox 및 Chrome의 이 동작 (놀랍게도 IE에서 작업하는 동안)은 버그가 아닙니다. 버그 984869에 따르면 버튼 요소는 특수 처리로 렌더링되며 표시와 같은 CSS 속성을 무시할 수 있습니다. 이 동작은 버튼에만 국한되는 것이 아닙니다. fieldset, table 및 del 요소도 유사한 렌더링 이상을 나타냅니다.

해결책

CSS 유연한 상자 레이아웃에 지정된 대로 fieldset 요소의 하위 요소를 안정적으로 배치하려면 , 해결 방법을 사용해야 합니다. 즉, 필드 세트 내의 div 컨테이너 안에 하위 요소를 래핑해야 합니다. 이 접근 방식은 모든 브라우저에서 일관되게 작동하여 모든 경우에 원하는 레이아웃을 보장합니다.

Firefox 46 이상

그러나 Firefox 사용자에게 좋은 소식이 있습니다: Firefox 46 이상 구현에서는 fieldset 요소에 대해 Flexbox를 지원합니다(버그 1230207 참조). 즉, 해결 방법 없이 필드세트에서 display: flex를 사용할 수 있습니다.

위 내용은 왜 `display: flex`가 ``요소에서 작동하지 않나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!