css - 复杂的柔性盒。 child 到 flex-end，但首先 flex-start 垂直

Question

我现在正在抓头发，需要一些帮助。

我有复杂的 flexbox 问题。我只能编辑 CSS，不能更新 HTML。

CodePen 上的示例:https://codepen.io/anon/pen/RqYMZJ

这是我能得到的最接近的，但是 child-6 和 child-4 以及 child-5 之间仍然有一些空间 :(

.main-parent {
    border:1px solid #000;
    display:flex;
}
.child-1 {
    background-color:red;
    width:50%;
    height:200px;
}
.parent {
    flex:1 1 auto;
    display:flex;  
    flex-wrap:wrap;
    flex-direction:row;
    align-items:flex-end;  
}
.child-3 {
    background-color:blue;  
    width:100%;
    align-self:flex-start;
}
.child-4 {
    background-color:green;
    height:40px;  
    margin: 0 0 0 0;
}
.child-5 {
    background-color:yellow;
    height:40px; 
    flex: 0;  
}

.child-6 {
    width:100%;
    background-color:lightblue;
    margin: 0 0 0 0;
}

我需要让 child 按如下方式走:

• child-3 父级全宽
• child-6 父级全宽
• child-4 和 child-5 宽度自动，以便它们可以相互跟随。
• 所有 child 都在 parent 的底部
• child-3，父级中位于父级之上的第一个子级。

Answer 1

这是一个“开箱即用”的解决方案。 请注意，我使用您的代码作为入门，您的视觉提示作为最终指南。这远非好的代码或最佳实践，但它是一种让你得到你想要的东西的“黑客”。它是“脆弱的”，结构可能会随着引入的任何新因素或任何重大变化而破裂。这就是为什么应该避免黑客攻击。对于每个新问题，您都需要另一个补丁/破解(直到没有选项为止):)话虽如此，这是代码。

.main-parent {
  position: relative;
  border: 1px solid #000;
  display: flex;
}

.child-1 {
  background-color: red;
  min-width: 50%;
  min-height: 200px;
}

.parent {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
}

.child-3 {
  background-color: blue;
  width: 100%;
  align-self: flex-start;
}

.child-4 {
  background-color: green;
  height: 40px;
  display: inline-block;
  width: auto;
  max-width: 50%;
}
.child-5 {
  background-color: yellow;
  height: 40px;
  display: inline-block;
  width: auto;
  max-width: 50%;
}

.child-6 {
  width: 50%;
  background-color: lightblue;
  position: absolute;
  bottom: 40px;
}

<div class="main-parent">
  <div class="child-1">1</div>
  <div class="parent">
    <div class="child-3">3<br><br>1<br><br>1</div>
    <div class="child-6">6 line</div>
    <div class="child-4">4</div>
    <div class="child-5">5</div>
  </div>
</div>

• 我基本上已经使用了您的 codepen，并通过将其位置设置为绝对来简单地从流程中删除了 child-6。 Main parent 现在有相对位置，所以它可以作为引用。
• 因为您已将 child-4 和 child-5 的高度硬编码为 40px，所以我简单地设置了 child-6< 的底部值到那个数量(40px)。
• 另外，请注意 child-6 的宽度现在是 50%，因为它是相对于主父级的。

我希望这能解决您当前的问题，但请注意类似的方法。它们可以在您最不希望/最不期望的时候轻易地“咬您”。

附言如果您打算更改 4 岁和 5 岁 child 的高度，还有一项额外的安全措施。我会为此使用 css 变量，并将它也用于 child-6 bottom 值。例如:

:root {
  --your-variable-name: 40px;
}

.child-4,
.child-5 {
  height: var(--your-variable-name);
}

.child-6 {
  bottom: var(--your-variable-name);
}

稍后如果您决定将 40px 更改为(比方说)60px，您只需在一个地方执行此操作，它会自动更新所有位置并让您的元素保持您最初想要的方式(6 直接在4 和 5 的顶部)。