Flex-basis 除非没有子节点答案

【问题标题】：Flex-basis unless no child existsFlex-basis 除非没有子节点
【发布时间】：2018-10-12 00:41:37
【问题描述】：

我有以下使用 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>

【问题讨论】：

你可以使用` .grid--container .left-col:empty {flex-basis:0%}. The requirement for the :empty` 选择器是：没有空格，没有cmets，什么都没有！跨度>
grid 可能更适合这个
@enxaneta 谢谢，完美解决。

标签： html css flexbox

【解决方案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>

【讨论】：