Flexbox 可以帮助我吗？答案

【问题标题】：Can Flexbox help me?Flexbox 可以帮助我吗？
【发布时间】：2018-09-28 19:04:06
【问题描述】：

我继承了别人的问题。 HTML 是所有带有浮动、显示和定位调整的 DIV。我无法改变的一件事是 HTML DIV 的结构。我也不希望添加任何新的 javascript 库。但是我可以将我需要的所有 CSS 添加到现有的 DIV 中。

目前 3 个 DIV 嵌入为：

<DIV id="firstrow"> 1 </DIV>
<DIV id="secondrow">
    <DIV> 2 </DIV>
    <DIV> 3 </DIV>
</DIV>

请看下图。这样做的问题是，随着 DIV1 的增长，DIV3 会下降。我希望从上到下保持 DIV3 完全合理（就像 STRETCH 一样）。

不了解当前代码如何组合 DISPLAYS、FLOATS 和 POSITIONING —— 我想我需要删除所有 CSS 并用一些 FLEXBOX 替换。但我似乎无法获得正确的 FLEX 属性组合，以使 DIV3 表现得可以拉伸（而不是被撞倒）。

幸运的是，这仅适用于桌面版 Chrome（不适用于移动设备或其他浏览器）。

【问题讨论】：

你能改变你的html结构吗？如果是这样，我会交换它，所以 1 和 2 在一起，而 3 是独立的，那么 flex 可以提供帮助 - jsfiddle.net/k9bjdf34/4
使用@Pete 解决方案和一些javascript 来操作HTML 结构？
好的，如果您可以在上面的 html 周围放置一个包装器，并且 column3 永远不会高于 1 和 2 的组合，那么您可以使用肮脏的绝对定位技巧（但前提是 secondrow 是 position:static）：jsfiddle.net/k9bjdf34/9
“Flexbox 可以帮助我吗？” - 不……它不能
答案不使用您当前的 html - 他们添加了一个包装器，所以我的评论仍然是正确的 - 不能单独使用您当前的 html 完成

标签： javascript html css flexbox

【解决方案1】：

如果 div 3 的宽度是已知的并且是固定值，那么您就可以了： https://codepen.io/AugustinF/pen/qYBpmR

.wrapper {
  position: relative;
  border: 2px solid black;
}
#firstrow {
  height: 100px;
  margin-right: 200px;
  background: green;

}
#secondrow {
}
#div2 {
  float:left;
  background: blue;
}
#div3 {
  width: 200px;
  position: absolute;
  top:0;
  right:0;
  height: 100%;
  background: red;
}
.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

HTML：

<div class="wrapper clearfix">
    <DIV id="firstrow"> 1 </DIV>
    <DIV id="secondrow clearfix">
        <DIV id="div2"> 2 </DIV>
        <DIV id="div3"> 3 </DIV>
    </DIV>
</div>

使用@Pete 解决方案，您可以使用 javascript 修改 HTML 结构，方法是将此代码放在 body 标记的末尾：

<script>
  document.getElementById('firstrow').appendChild(
    document.getElementById('div2')
  );
</script>

【讨论】：