如何将子文本放在Flexbox框的左边缘？

Question

在此示例中，您如何将子文本放在父框的左边缘？

目标是看到前一个框中的一半文本和一半在自己的框中，无论文本长度如何。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

对每个文本项使用绝对定位。使用position: relative（detailed explanation）。

为每个单独的框（flex项）创建包含的块

您需要为容器添加高度，因为设置高度的文本将从文档流中删除。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

将文本项设置为inline-block

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;