很少帮助对齐flexboxes

Question

我正在尝试使用flexbox为我的项目构建工具提示以对齐其中的内容。 这是我想象的样子的一个小图像：

这是我上面图片的CSS代码尝试：

.hud-tt-container {
  display: flex;
  width: 100%;
  height: auto;
box-sizing: border-box;
}

.hud-tt-info-container {
  width: auto;
  height: 64px;
  flex-grow: 1;
  border: 1px solid yellow;
box-sizing: border-box;
}

.hud-tt-info-block {
  width: auto;
  height: 32px;
  border: 1px solid grey;
box-sizing: border-box;
}

.col-full {
  width: 100%;
  height: 32px;
  float: left;
  border: 1px solid gray;
box-sizing: border-box;
}

.col-half {
  width: 50%;
  height: 32px;
  float: left;
  border: 1px solid gray;
box-sizing: border-box;
}

.hud-tt-lv-container {
  width: 64px;
  height: 64px;
  flex-grow: 0;
  border: 1px solid blue;
box-sizing: border-box;
}

<div class="hud-tooltip f16 fwhite">
  <div class="hud-tt-container">
    <div class="hud-tt-info-container">
      <div class="col-full"></div>
      <div class="col-half"></div>
      <div class="col-half"></div>
    </div>
    <div class="hud-tt-lv-container">
      <canvas id="Bar"></canvas>
    </div>
  </div>
</div>

我目前正在使用col类以这种方式对它们进行排序。这样它也可以，但是我想为此使用flexbox，所以使用hud-tt-info-block 级别和信息容器按照我的要求对齐。 Level容器需要64x64px，而info容器占用所有空间。但我不知道如何按照我希望他们使用flexbox的方式对齐信息块 由于数量很大，使用flexbox来对齐col类是非常重要的。 Flexbox可以随着数字变大而适应宽度，而我当前的解决方案不适用于大数

Answer 1

您可以嵌套flex元素，其中将display: flex添加到作为弹性项目的.hud-tt-info-container，它也会变为弹性容器，其子项将成为弹性项目等等。

参见CSS中的注释

＆＃13;

＆＃13;

.hud-tt-container {
  display: flex;
}

.hud-tt-info-container {
  flex-grow: 1;                        /*  fill remaining space  */
  display: flex;                       /*  added  */
  flex-wrap: wrap;                     /*  added, allow items to wrap  */
  height: 64px;
}

.hud-tt-info-block {
  height: 32px;
  border: 1px solid gray;
  box-sizing: border-box;
}

.col-full {
  flex-basis: 100%;                    /*  changed, take full width and push
                                           the other items to a new row  */
}

.col-half {
  flex-basis: 50%;                     /*  changed  */
}

.hud-tt-lv-container {
  width: 64px;
  height: 64px;
  border: 1px solid blue;
  box-sizing: border-box;
}

＆＃13;

<div class="hud-tooltip f16 fwhite">
  <div class="hud-tt-container">
    <div class="hud-tt-info-container">
      <div class="hud-tt-info-block col-full"></div>
      <div class="hud-tt-info-block col-half"></div>
      <div class="hud-tt-info-block col-half"></div>
    </div>
    <div class="hud-tt-lv-container">
      <canvas id="Bar"></canvas>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;