Question

此刻，我正在拔头发，需要一些帮助。

我有复杂的弹性盒问题。我只能编辑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-3父级的完整宽度
child-6父级的完整宽度
child-4和child-5宽度自动设置，以便它们可以彼此跟随。
所有孩子都位于父母的最下方
child-3，父母的第一个孩子在父母的顶端。

Answer 1

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

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

我基本上已经使用了您的代码笔，并通过将child-6的位置设置为绝对来从流中删除child-4。主要父母现在具有相对位置，因此可以作为参考。
由于您将child-5和child-6的高度硬编码为40px，因此我将child-6的底值设置为该值（40px）。
还要注意，bottom的宽度现在是50％，因为它是相对于主要父对象的。

我希望这可以解决您当前的问题，但是请注意类似的方法。当您最不想要/期望它时，他们可以轻松地“咬你”。

P.S。如果您打算更改子代4和5的身高，则还有一项安全措施。我将使用css变量，并将其也用于子代6 :root { --your-variable-name: 40px; } .child-4, .child-5 { height: var(--your-variable-name); } .child-6 { bottom: var(--your-variable-name); }的值。例如：

SELECT CASE 
       WHEN (A.cus_nm LIKE '%(%' AND A.cus_lkp_nm NOT LIKE '%REG%')
       THEN 'N'
       ELSE 'Y'
       END AS Main,
       CASE
       WHEN (A.cus_nm LIKE '%(%' AND A.cus_lkp_nm NOT LIKE '%REG%')
       THEN (SELECT B.cus_cus_no
               FROM arrcus_rec AS B
              WHERE B.cus_dun_no = A.cus_dun_no
                    -- Beware De Morgan
                AND (B.cus_nm NOT LIKE '%(%' OR B.cus_lkp_nm LIKE '%REG%')
            )
       ELSE NULL::INTEGER
       END AS Job_Account,
       *
  FROM arrcus_rec A
 WHERE cus_dun_no IN (
           SELECT cus_dun_no
             FROM arrcus_rec
          --WHERE cus_usg_sts = 'A'
            GROUP BY cus_dun_no
           HAVING COUNT(cus_dun_no) > 1
       )

稍后，如果您决定将40像素更改为（例如）60像素，则只需在一个地方进行操作，它将自动在所有地方更新，并按照您想要的方式将您的元素放在第一位（直接在第6个元素上）顶部4和5）。

复杂的弹性盒。进行弹性弯曲，但首先要垂直弯曲

1 个答案: