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

유연한 상자 모델: 'flex', 'box' 및 'flexbox' 값 탐색

유연한 상자 모델의 출현 CSS3에 패러다임 전환을 도입하여 인라인 및 블록과 같은 디스플레이 기능을 단계적으로 폐지했습니다. 그러나 유연한 상자 모델은 flex, box, flexbox 등 다양한 값으로 표시되는 경우가 많습니다. 이 문서에서는 이러한 값의 차이점을 자세히 알아보고 사용법에 대한 지침을 제공합니다.

디스플레이: flex

디스플레이: flex는 현재 표준 값입니다. Chrome 29, Firefox 22, Safari 7 및 Internet Explorer 11을 포함한 최신 브라우저를 지원합니다. Flex는 가로 및 세로 축을 따라 항목을 정렬하고 배포하는 기능을 포함하여 레이아웃 관리를 위한 고급 기능을 제공합니다.

디스플레이: 상자

디스플레이: 상자는 이전 버전입니다. 유연한 상자 모델 개발 초기에 도입된 가치. 공급업체 접두사가 있는 대부분의 주요 브라우저에서 지원되지만 일반적으로 display: flex를 위해 단계적으로 폐지됩니다.

Display: flexbox

Display: flexbox는 또 다른 중간 값입니다. 이는 디스플레이: 상자에서 디스플레이: 플렉스로의 전환을 연결하기 위해 도입되었습니다. 공급업체 접두사가 있는 최신 브라우저에서 지원되며 기능 측면에서 display: flex와 유사합니다.

어떤 값을 사용해야 할까요?

궁극적으로 이들 중에서 선택하는 것은 값은 지원해야 하는 브라우저에 따라 다릅니다. 이전 버전과의 호환성이 필요한 경우 브라우저 접두사가 있는 display: 상자 사용을 고려하세요. 보다 최신 브라우저 지원을 위해서는 display: flex가 권장 옵션입니다.

추가 참고 사항

• 박스 사양은 flexbox/flex 사양과 크게 다르며, 원하는 결과를 얻는 데 항상 적합한 것은 아닙니다.
• 일부 브라우저는 여러 표시 값을 지원할 수 있습니다. 그러나 미래 보장을 위해 가능하면 플렉스 속성을 포함하는 것이 좋습니다.
• 포괄적인 브라우저 지원 정보는 caniuse.com/#feat=flexbox를 확인하세요.

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