元素調整寬度根據父母和兄弟

Question

我已經設置了父母div和其3個子div。現在，第三個孩子隱藏起來了。我已經將第一個孩子的寬度設置爲20％，並且希望第二個孩子自動取得剩餘寬度，而不是明確設置它。第三個孩子的寬度是20％，當它被隱藏時，它應該取其父母寬度的一部分，而第二孩子應該相應地重新調整其寬度。

<div id="parent" style="background-color: pink;"> 
    <div id="child1" style="background-color: gray; display: inline-block; width: 20%;"> 
     div1 
    </div> 

    <div id="child2" style="background-color: blue; display: inline-block"> 
     div2 
    </div> 

    <div id="child2" style="background-color: violet; display: hidden; width: 20%;"> 
     div3 
    </div> 
</div> 

Answer 1

這可以通過彈性佈局來實現。這裏是你的情況的代碼片段：

#parent { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
#child1 { 
 
    flex-basis: 20%; 
 
} 
 
#child2 { 
 
    flex: 1; 
 
} 
 
#child3 { 
 
    display: none; 
 
}

<div id="parent" style="background-color: pink;"> 
 
    <div id="child1" style="background-color: gray;"> 
 
     div1 
 
    </div> 
 

 
    <div id="child2" style="background-color: blue;"> 
 
     div2 
 
    </div> 
 

 
    <div id="child3" style="background-color: violet;"> 
 
     div3 
 
    </div> 
 
</div>

一些解釋：

1. 讓#parent的顯示器作爲flex，所有的子元素開始彎曲佈局。
2. 將flex-direction設爲row，使子元素水平顯示。
3. 使#child2的flex爲1，這意味着它將縮小或擴大佔據#parent中的所有可用空間。

請注意所有內聯display CSS規則將被刪除。一旦彈性佈局被啓用，它們不是必需的。