Flexbox 항목에 `display`를 설정하면 기본 동작 이상의 실질적인 이점을 제공합니까?

Flex Box 항목에서 표시 속성의 중요성 탐색

질문:

개별 플렉스의 표시 속성을 조정할 수 있습니다. 상자 아이템은 뚜렷한 이점이나 결과를 제공합니까? 구체적으로, 표시를 차단 또는 인라인 차단으로 설정하면 어떤 의미가 있습니까?

답변:

CSS 사양에서는 플렉스 항목에 할당된 인라인 수준 표시 값을 명확히 합니다. 해당 블록 수준의 대응 항목으로 변환됩니다. 따라서 명시적으로 표시를 block 또는 inline-block으로 설정하면 둘 다 차단으로 해석되므로 눈에 띄는 변화가 발생하지 않습니다.

그러나 표시 속성을 table, inline-table, inline-grid로 설정하면 상당한 효과가 발생할 수 있습니다. 또는 그리드. 이러한 경우 Flex 항목은 지정된 디스플레이 유형의 특성을 채택하여 표현과 동작을 변경합니다.

다음 HTML 및 CSS 예를 고려하세요.

<div class="box">
  <div>
    <span></span>

    <span></span>
  </div>
</div>

<div class="box">
  <div>
<pre class="brush:php;toolbar:false">.box {
  display: flex;
  margin: 5px;
}

.box > div {
  height: 50px;
  width: 100%;
  background: red;
  grid-template-columns: 200px 1fr;
  grid-template-rows: 1fr;
  grid-gap: 20px;
}

span {
  border: 2px solid green;
}

In 첫 번째 상자에서는 중첩된 div의 표시 속성이 명시적으로 설정되지 않습니다. 결과적으로 기본 차단 표시가 적용됩니다. 대조적으로, 두 번째 상자에서는 디스플레이가 inline-grid로 설정되어 내부 div가 그리드 요소로 작동하게 됩니다. 이는 그에 따라 정렬되는 범위 주변의 녹색 테두리를 통해 알 수 있습니다.