탄성 속성을 올바르게 사용하여 탄성 컨테이너를 중첩합니다.

Question

Flexbox를 올바르게 사용하는 데 문제가 있으며 상위 요소와 하위 요소의 중첩에 대해 좀 더 명확하게 설명하고 싶습니다.

하위 요소가 상위 요소의 flex 속성을 상속한다는 것을 알고 있습니다. 하지만 추가 하위 요소(예: "손주")는 어떻게 되나요? 이 경우 Flexbox의 올바른 사용법은 무엇입니까?

즉, 하위 요소의 하위 요소에 적용하려면 하위 요소에도 display: flex를 적용해야 합니까? 이것이 첫 번째 하위 요소의 상위 요소의 flex 속성을 재정의합니까?

.parent-container {
  디스플레이: 플렉스;
  플렉스: 1 0 100%;
  배경색:노란색;
}
.child-컨테이너 {
  플렉스: 11 50%;
  배경색: 파란색;
}
.baby-of-child-컨테이너 {
  플렉스: 11 50%;
  배경색: 녹색;
}

  

    
자녀
    
자녀
  
  

    
자녀
    
자녀
  

Answer 1

flex 형식 지정 컨텍스트의 범위는 상위-하위 관계로 제한됩니다.

즉, Flex 컨테이너는 항상 상위이고 Flex 항목은 항상 하위입니다. Flex 속성은 이 관계 내에서만 작동합니다.

하위 수준을 초과하는 Flex 컨테이너의 하위 항목은 Flex 레이아웃에 속하지 않으며 Flex 속성을 허용하지 않습니다.

자식에게 플렉스 속성을 적용하려면 항상 부모에게 display: flex或display: inline-flex적용해야 합니다.

일부 플렉스 속성은 플렉스 컨테이너에만 적용됩니다(예: justify-content、flex-wrap和flex-direction），而某些flex属性仅适用于flex项目（例如align-self、flex-grow和flex).

그러나 Flex 항목은 Flex 컨테이너일 수도 있습니다. 이 경우 요소는 모든 flex 속성을 허용할 수 있습니다. 각 속성은 서로 다른 기능을 수행하므로 내부 충돌이 없으며 재정의할 필요가 없습니다.