正確使用彈性屬性的方法來嵌套彈性容器

Question

我在正確使用flexbox時遇到了一些問題，想要對父元素和子元素的嵌套有一些澄清。

我知道子元素會繼承父元素的flex屬性，但是對於進一步的後代元素（例如“孫子”）會發生什麼？在這種情況下，flexbox的正確用法是什麼？

換句話說，我是否也需要將display: flex應用於子元素，以應用於子元素的子元素？這樣會覆蓋第一個子元素的父元素的flex屬性嗎？

.parent-container {
  display: flex;
  flex: 1 0 100%;
  background-color:yellow;
}
.child-container {
  flex: 1 1 50%;
  background-color: blue;
}
.baby-of-child-container {
  flex: 1 1 50%;
  background-color: green;
}

<div class='parent-container'>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
  <div class='child-container'>
    <div class='baby-of-child-container'>child</div>
    <div class='baby-of-child-container'>child</div>
  </div>
</div>

Answer 1

一個flex格式化上下文的範圍只限於父子關係​​。

這表示flex容器始終是父級，而flex專案始終是子級。 Flex屬性僅在此關係中運作。

超出子級的flex容器的後代不屬於flex佈局，也不會接受flex屬性。

為了將flex屬性套用到子級，您始終需要將display: flex或display: inline-flex套用到父級。

某些flex屬性僅適用於flex容器（例如justify-content、flex-wrap和flex-direction），而某些flex屬性僅適用於flex專案（例如align-self、flex-grow和flex）。

然而，flex專案也可以是flex容器。在這種情況下，該元素可以接受所有flex屬性。由於每個屬性執行不同的功能，不存在內部衝突，也不需要覆蓋任何內容。