CODEWITHSUNDEEP
htmlcssflexbox
user7047022
user7047022

Reputation:

Little help aligning flexboxes

I'm trying to build a tooltip for my items using flexboxes to align content inside them. Here is a little image of how I imagined it would look: enter image description here

here is my CSS code attempt of the image above:

.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>

I'm currently using col class to arange them this way. This way it also works, but I want to use flexboxes for this, so to use hud-tt-info-block The level and info container align just as I want them to. Level container takes 64x64px, while info container takes all the space left. But I'm not sure how to align info blocks the way i want them to be using flexbox Using flexbox to align col classes is very important due to large numbers. Flexbox can adapt width as numbers get bigger, whereas my current solution doesn't work well with large numbers

Upvotes: 2

Views: 59

Answers (1)

Asons
Asons

Reputation: 87303

You can nest flex elements, where adding display: flex to the .hud-tt-info-container being a flex item, it also becomes a flex container, and its children becomes flex items and so on.

See notes in CSS

.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;
}
<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>

Upvotes: 2

Related Questions