Chrome 115부터 CSS 표시 속성에 여러 값이 있습니다. 디스플레이: 플렉스는 디스플레이: 블록 플렉스가 되고 디스플레이: 블록은 디스플레이: 블록 흐름이 됩니다. 귀하가 알고 있는 단일 값은 이제 레거시로 간주되지만 이전 버전과의 호환성을 위해 브라우저에 보관됩니다.

왜 기한이 오래 지났나요?

간단히 말하면, 박스 모델과 같은 것들을 설명하는 방법이 바뀌었습니다. 사양은 여전히 ​​CR 스냅샷입니다. 즉, W3C는 표준을 완성하기 위해 구현자의 경험을 수집합니다. 따라서 일부 내용은 여전히 ​​변경될 수 있습니다.

재작업에서는 디스플레이 유형을 외부 디스플레이 유형과 내부 디스플레이 유형의 두 부분으로 나눕니다.

외부 디스플레이 유형은 주요 상자 자체가 흐름 레이아웃에 참여하는 방식을 나타냅니다.

내부 디스플레이 유형은 하위 상자가 배치되는 방식을 나타냅니다(교체된 요소를 제외하면 좀 더 복잡합니다).

따라서 display: flex는 display: block flex가 됩니다. 즉, 외부 디스플레이 유형은 블록(외부에서는 블록 요소처럼 동작함)이지만 해당 하위 요소는 flex 레이아웃에 따라 렌더링됩니다.

이전과 동일한 동작이지만 이번 변경으로 자식 요소와 주변 요소에 대한 표시 속성의 영향에 대해 이야기할 수 있습니다. 제 생각에는 이 정신 모델을 사용하면 보다 예측 가능한 레이아웃을 더 쉽게 만들 수 있으며 다양한 레이아웃 모드와 그 효과를 더 쉽게 설명할 수 있습니다.

최신 강좌나 튜토리얼에서는 상자 모델에 대한 좋은 설명이 여백, 테두리, 패딩, 너비, 높이뿐만 아니라 상자 크기 및 표시 속성도 포괄해야 합니다.

표시 속성의 유효한 값은 무엇입니까?

이미 언급했듯이 일부 오래된 속성은 이제 유산입니다. 유효한 모든 속성은 다음과 같습니다.

다중 값 구문 표시의 경우: 외부 유형 내부 유형 유효한 외부 유형은 블록, 인라인 및 run-in입니다. 유효한 내부 디스플레이 유형은 flow, flow-root, 테이블, flex, 그리드 및 루비.

유효한 단일 값도 있습니다: list-item, contents 및 none.

또한 CSS에는 유효한 일부 내부 표시 값이 있습니다. 이 값은 테이블 또는 루비 디스플레이 유형을 사용할 때 계산됩니다.

다음 조합은 이제 레거시입니다. inline-block, inline-table, inline-flex 및 inline-grid . 이는 해당하는 다중 값으로 대체될 수 있습니다(예: display: inline flex.

최신 브라우저 버전에서 다중 값이 지원됩니다: https://caniuse.com/mdn-css_properties_display_multi-keyword_values

표시 속성의 다중 키워드 값에 대해 Caniuse를 사용합니다.

그게 다입니다, 여러분!

읽어주셔서 정말 감사합니다!