html - 为什么 flex 元素不填充剩余空间？

<分区>

我正在尝试使用 flexbox 对齐元素

.container {
  display: flex;
  flex-wrap: wrap;
}

.left {
  flex: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.rightTop {
  flex: 85%;
  background-color: rgb(0, 255, 0);
  align-self: flex-start;
}

.rightBottom {
  flex: 85%;
  background-color: rgb(0, 0, 255);
}

<div class="container">
  <div class="left">
    LEFT
  </div>
  <div class="rightTop">RIGHT TOP</div>
  <div class="rightBottom">RIGHT BOTTOM</div>
</div>

如您所见，即使我将 flex 设置为 85%，最后一个元素仍位于 .left div 下方。

我想要的是让右下元素填充右上元素下的剩余空间。它应该看起来像这样:

我知道我可以通过用容器包裹右上角和右下角的元素来实现这一点，但我想知道是否有办法用当前的标记来做到这一点。 另外，你能解释一下为什么右下角的元素会下降而不是填充剩余空间吗？

最佳答案

我会将正确的行放入 flex column

.flex {
  display: flex;
}

.left {
  flex-basis: 15%;
  background-color: rgb(255, 0, 0);
  height: 150px;
}

.right {
  flex-grow: 1;
  flex-direction: column;
}

.rightTop {
  background-color: rgb(0, 255, 0);
}

.rightBottom {
  background-color: rgb(0, 0, 255);
  flex-grow: 1;
}

<div class="flex">
  <div class="left">
    LEFT
  </div>
  <div class="flex right">
    <div class="rightTop">RIGHT TOP</div>
    <div class="rightBottom">RIGHT BOTTOM</div>
  </div>
</div>

关于html - 为什么 flex 元素不填充剩余空间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43266302/

上一篇：javascript - drawImage() 渲染模糊图像

下一篇：javascript - 使用纯 javascript 获取元素的尺寸和位置

相关文章：

javascript - 如何使用nodeJS将脚本文件链接到html文件

html - Flex 元素宽度不在 IE 中调整大小

css - IE 元素的高度不能通过最小高度跨越其绝对定位的 flex 容器

javascript - HTML5 音频和垃圾收集

html - 在表格中设置 TD 中的 div 宽度

css - 如何在 Google Chrome 中获取所有加载的 CSS 类的列表？

css - 编写 CSS 时如何保持井井有条？

html - CSS字体速记？

html - 更改 div 与背景图像之间的 flex 间距

html - 让 Bootstrap.css 列表组占据移动应用程序页面的整个宽度