html - Flexbox 非兄弟孙辈

Question

这是 an example我想要完成的事情。

基本上我想要这样的 DOM 结构:

<div class="parent">
  <div class="child">
    <div class="grandchild flex-3">
      Wide Grandchild
    </div>
    <div class="grandchild flex-1">
      Narrow Grandchild
    </div>
  </div>
  <div class="child">
    <div class="grandchild flex-2">
      Medium Grandchild
    </div>
  </div>
</div>

但我希望孙子们的 flex 属性能够反射(reflect)出来，就好像他们是 sibling 一样。

这是我目前拥有的 CSS:

.parent {
  display: flex;
}

.grandchild {
  background-color: rebeccapurple;
  color: #ddd;
  padding: 6px;
  border: solid 2px #ddd;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

我希望它像这样呈现:

然而，它是这样呈现的:

Answer 1

我让它看起来像你的目标。我已经更新了你的 JSBin .

<div class="parent">
  <div class="child child-flex flex-2">
    <div class="grandchild flex-3">
      Wide Grandchild
    </div>
    <div class="grandchild flex-1">
      Narrow Grandchild
    </div>
  </div>
  <div class="child child-flex flex-1">
    <div class="grandchild flex-2">
      Medium Grandchild
    </div>
  </div>
</div>