`display` 속성은 Flexbox 항목 레이아웃에 어떤 영향을 줍니까?

Flexbox 항목의 표시 속성 이해

Flexbox에서 표시 속성은 Flex 컨테이너 내의 하위 요소 레이아웃을 제어합니다. 플렉스 항목의 기본값은 display: block이지만 이 속성을 수정하면 흥미로운 효과와 기능적 이점을 얻을 수 있습니다. 두 가지 일반적인 옵션은 display:block 및 display:inline-block입니다.

주요 고려 사항:

CSS 사양 display:inline-block과 같은 인라인 수준 값으로 디스플레이 설정이 계산된다는 점을 명확히 합니다. Flex 컨테이너의 하위 항목으로 사용되는 경우 블록 수준 값(이 경우 block)으로 변경됩니다. 따라서 Flexbox 항목의 display:block과 display:inline-block 사이에는 실질적인 차이가 없습니다.

그러나 디스플레이를 table, 인라인 테이블, 인라인 그리드 또는 그리드는 상당한 영향을 미칠 수 있습니다. 이러한 경우 flex 항목은 지정된 디스플레이 유형의 동작을 채택합니다.

예:

다음 코드를 고려하세요.

.box {
  display: flex;
  margin:5px;
}

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

span {
  border: 2px solid green;
}

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

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

<div class="box">
  <div>

첫 번째 상자에서

display:grid 속성은 플렉스를 변환합니다. 두 개의 열과 하나의 행이 있는 그리드에 항목을 추가합니다. 그리드 내부의 범위는 그리드 레이아웃에 따라 정렬됩니다.

두 번째 상자에서

display:inline-grid를 설정하면 인라인 그리드가 생성됩니다. 여기서 범위는 가로로 표시됩니다.

디스플레이 속성을 조작하면 Flexbox 및 기타 디스플레이 유형의 기능을 활용하여 유연하고 복잡한 레이아웃을 만들 수 있습니다.

위 내용은 `display` 속성은 Flexbox 항목 레이아웃에 어떤 영향을 줍니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!