Flex, Box 또는 Flexbox: 어떤 CSS 표시 속성을 사용해야 합니까?

유연한 상자 모델 이해: 디스플레이: flex, box, flexbox

CSS3의 최근 발전으로 유연한 상자 모델이 도입되었습니다. 전통적인 방법. 그러나 flex, box 및 flexbox와 같은 여러 표시 속성 값이 있으면 혼란이 발생합니다.

차이점 및 호환성

이 세 가지 값은 브라우저 지원 수준이 다양합니다.

• display: box는 이전(Firefox 2.0)에 도입되었지만 이제는 주로 공급업체 접두사로 지원됩니다. Chrome, Safari 및 Android와 같은 브라우저에서는 구현이 제한되어 있습니다.
• display: flexbox는 나중에(Chrome 17) 접두사와 함께 도입되었으며 나중에 IE 10에서 도입되었습니다. Safari/iOS는 여전히 접두사가 필요합니다.
• display: flex는 현재 표준이며 접두사 없이 최신 브라우저(Chrome, Firefox, Safari 등)에서 지원됩니다. 가장 호환되는 옵션입니다.

올바른 값 선택

선택은 대상 브라우저와 원하는 효과에 따라 다릅니다. 현재 브라우저와 이전 브라우저와의 호환성을 위해 display: flexbox와 display: flex를 함께 사용하는 것이 좋습니다. 특별히 이전 브라우저 지원이 필요한 경우 접두사가 있는 display: box가 필요할 수 있습니다.

브라우저 지원 세부 정보

다음은 각 값에 대한 브라우저 지원을 요약한 표입니다.

Display Value	Chrome	Firefox	Safari/iOS	IE
display: box	4.0 (prefixed)	2.0 (prefixed)	3.1 (prefixed)	10 (prefixed)
display: flexbox	17 (prefixed)	N/A	7 (prefixed)	10 (prefixed)
display: flex	21 (prefixed), 29 (unprefixed)	22 (unprefixed)	N/A	11 (unprefixed)

시간이 지남에 따라 브라우저는 이전 값에 대한 지원을 중단할 수 있으므로 향후 호환성을 위해 현재 Flex 표준을 사용하는 것이 좋습니다.

위 내용은 Flex, Box 또는 Flexbox: 어떤 CSS 표시 속성을 사용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!