CODEWITHSUNDEEP
htmlcssflexbox
GollyJer
GollyJer

Reputation: 26672

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

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>

Upvotes: 2

Views: 34

Answers (2)

vals
vals

Reputation: 64174

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>

Upvotes: 1

Michael Benjamin
Michael Benjamin

Reputation: 371271

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>

Upvotes: 1

Related Questions