<p>Flexbox를 올바르게 사용하는 데 문제가 있으며 상위 요소와 하위 요소의 중첩에 대해 좀 더 명확하게 설명하고 싶습니다. </p> <p>하위 요소가 상위 요소의 flex 속성을 상속한다는 것을 알고 있습니다. 하지만 추가 하위 요소(예: "손주")는 어떻게 되나요? 이 경우 Flexbox의 올바른 사용법은 무엇입니까? </p> <p>즉, 하위 요소의 하위 요소에 적용하려면 하위 요소에도 <code>display: flex</code>를 적용해야 합니까? 이것이 첫 번째 하위 요소의 상위 요소의 flex 속성을 재정의합니까? </p> <p><br /></p> <pre class="brush:css;toolbar:false;">.parent-container { 디스플레이: 플렉스; 플렉스: 1 0 100%; 배경색:노란색; } .child-컨테이너 { 플렉스: 11 50%; 배경색: 파란색; } .baby-of-child-컨테이너 { 플렉스: 11 50%; 배경색: 녹색; }</pre> <pre class="brush:html;toolbar:false;"><div class='parent-container'> <div class='child-container'> <div class='baby-of-child-container'>자녀</div> <div class='baby-of-child-container'>자녀</div> </div> <div class='child-container'> <div class='baby-of-child-container'>자녀</div> <div class='baby-of-child-container'>자녀</div> </div>