如何对齐嵌套项内容

Question

我有一个类似于这 (代码)的布局。

.parent {
    display : flex;
    justify-content : space-between;
}

.left {
   flex-grow: 1;
   flex-basis: 0;
  background-color: blue
}

 .right {
   background-color: red;
   flex-grow: 1;
   flex-basis: 0;
}

.center {
  background-color: green;
}

.parent-2 {
  margin-top: 20px;
  margin-left: 30px
}

.parent-3 {
  margin-top: 20px;
  margin-left: 60px
}

​

由于后两项的左边有空白处，项目的内容在垂直意义上相互错位。我想对齐这些项目，这样绿色和红色的部分就会对齐，但是蓝色应该保持不对齐。怎样才能做到这一点？

编辑:我也希望对任意数量的嵌套项自动发生这种情况。

Answer 1

您需要添加具有计算flex-basis值的calc

​

.parent {
    display : flex;
    justify-content : space-between;
}

 .right {
   background-color: red;
   flex: 1 0 0;
}

.center {
  background-color: green;
}

.parent-2 {
  margin-top: 20px;
  margin-left: 30px
}

.parent-3 {
  margin-top: 20px;
  margin-left: 60px
}

.left {
    flex: 0 0 33.33%;
    background-color: blue;
}
.parent.parent-2 .left {
    flex: 0 0 calc(33.33% - 20px);
}
.parent.parent-3 .left {
    flex: 0 0 calc(33.33% - 40px);
}

<div class="parent">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong text.
  </div>
</div>
<div class="parent parent-2">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong text.
  </div>
</div>
<div class="parent parent-3">
  <div class="left">
    short text.
  </div>
  <div class="center">
    I'm in the center.
  </div>
  <div class="right">
    Very loooooooo ooooooooooo oooooooooooooooooo oooooo ooooooooooo ooooooooooooooooooooooooooooooooong text.
  </div>
</div>

​