How do I center child text on the left edge of Flexbox boxes?

Question

In this example how would you center the child text on the left edge of the parent box?

The goal is to see half of the text in the previous box and half in its own box, regardless of the text length.

.boxesContainer {
  display: flex;
}
.text{
/* This needs to be 50% of the text width, not the box. */
/*   transform: translateX(-50%); */ 
}
.box1 {
  background: #D9E4AA; 
  flex-basis: 30%;
  z-index:1;
}
.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index:2;
}
.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index:3;
}
.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index:4;
}
.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index:5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

Take a look at a comment I posted here with some useful links : https://stackoverflow.com/questions/45104834/css3-flexbox-limit-4-items-per-row-auto-width#comment77181218_45104834 — JGFMK, Jul 14 '17 at 16:04

score 1 · Accepted Answer · answered Jul 14 '17 at 16:09

Use absolute positioning for each text item. Make each individual box (flex item) the containing block with position: relative (detailed explanation).

You will need to add a height to the container, because the text, which was setting the height, will be removed from the document flow.

.boxesContainer {
  display: flex;
  height: 20px;
}

.boxesContainer>  div {
  position: relative;
}

.boxesContainer > div > .text {
  position: absolute;
  transform: translateX(-50%);
}

.box1 {
  background: #D9E4AA;
  flex-basis: 30%;
  z-index: 1;
}

.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index: 2;
}

.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index: 3;
}

.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index: 4;
}

.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index: 5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

Thanks Michael. Works great but vals gets the check for simplicity. — GollyJer, Jul 14 '17 at 17:27
Yes. If it does the job you need, it's a simpler solution. I veered away from `inline-block` so I wouldn't have to deal with baseline alignment, which may elevate the text above the vertical center of the larger container. — Michael Benjamin, Jul 14 '17 at 19:34
Yeah, that makes sense. It will definitely be a useful tool for the toolbox. Thanks again for the help! — GollyJer, Jul 14 '17 at 19:37
Actually, had to reverse course on this one... your solution works best in practice because the text doesn't force it's size on the box in which it resides. Marked as solution. Once again... thanks! — GollyJer, Jul 14 '17 at 19:58

score 1 · Answer 2 · answered Jul 14 '17 at 16:12

set the text items to inline-block

.boxesContainer {
  display: flex;
}
.text{
   display: inline-block;
   transform: translateX(-50%); 
}
.box1 {
  background: #D9E4AA; 
  flex-basis: 30%;
  z-index:1;
}
.box2 {
  background: #B8D2EC;
  flex-basis: 10%;
  z-index:2;
}
.box3 {
  background: #F3D1B0;
  flex-basis: 20%;
  z-index:3;
}
.box4 {
  background: #D5B2D4;
  flex-basis: 10%;
  z-index:4;
}
.box5 {
  background: #F2AFAD;
  flex-basis: 40%;
  z-index:5;
}

<div class="boxesContainer">
  <div class="box1">
    <div class="text">
      1---1
    </div>
  </div>

  <div class="box2">
    <div class="text">
      2-----2
    </div>
  </div>

  <div class="box3">
    <div class="text">
      3-------3
    </div>
  </div>

  <div class="box4">
    <div class="text">
      4---------4
    </div>
  </div>

  <div class="box5">
    <div class="text">
      5-----------5
    </div>
  </div>

  <div class="box the-rest" />

</div>

How do I center child text on the left edge of Flexbox boxes?

2 Answers2