彈性基礎，除非沒有孩子

Question

我使用flex CSS進行以下布局，並且我的左容器設置為寬度為20％。 如果.col.left-col為空（som divs渲染為.my-left-div），我希望它折疊。

如果我將.grid--container .left-col更改為.grid--container .my-left-div ，則.left-col的寬度不再是20％，而是更多，如果沒有JavaScript，是否可以解決？

---------------------------------
|         top                   |
---------------------------------
|       |            |          |
|  left |   middle   |  right   |
|       |            |          |
|       |            |          |
|       |            |          |
|       |            |          |
|       |------------------------
|       |          bottom       |
---------------------------------

的HTML是這樣的。

  .grid--container { display: flex; width: 100%; justify-content: left; } .grid--container .left-col { flex: 0; flex-basis: 20%; } .grid--container .top { margin-top: 28px; } .grid--container .right-col { flex: 1; padding-left: 20px; } .grid--container .wrapper { display: flex; } .grid--container .wrapper > div { flex: 1; } 

  <div class="grid--container"> <div class="col left-col"> left </div> <div class="col right-col"> <div class="top"> top </div> <div class="wrapper"> <div class="middle"> middle </div> <div class="right"> right </div> </div> <div class="bottom"> bottom </div> </div> </div> 

Answer 1

解決了：

通過使用：empty選擇器。

  .grid--container { display: flex; width: 100%; justify-content: left; } .grid--container .left-col { flex: 0; flex-basis: 20%; } .grid--container .left-col:empty { flex-basis: 0%; } .grid--container .top { margin-top: 28px; } .grid--container .right-col { flex: 1; padding-left: 20px; } .grid--container .wrapper { display: flex; } .grid--container .wrapper > div { flex: 1; } 

  <div class="grid--container"> <div class="col left-col"> left </div> <div class="col right-col"> <div class="top"> top </div> <div class="wrapper"> <div class="middle"> middle </div> <div class="right"> right </div> </div> <div class="bottom"> bottom </div> </div> </div>