css - 如何创建 1 列 2 行的 flex 盒布局？

Question

给定以下标记:

<div class="box">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="C">C</div>
</div>

如何实现以下布局:

具有以下行为:

• A 固定宽度为 150px
• C 的高度基于其中内容的高度(会发生变化)，但它始终固定在底部。
• flex 容器(.box)宽度占据浏览器的整个宽度。
• B 和 C 始终占据 A 之后容器 (.box) 的剩余宽度'考虑到 150 像素的宽度。

What about A's and B's height? Is it fixed or it varies depending on the content or something else?

A里面内容的高度不会改变，但是B里面内容的高度会改变。 .box 高度应等于 max(高度A, 高度B + C)

Here's a pen where everything is stubbed out

Answer 1

您的结果在概念上很简单，但您需要使用的不仅仅是 3 个连续的元素来完成您想要的。 Flex box 是蜜蜂的膝盖，但它不能改变你的布局。您需要一个单独的子布局。

HTML

<div class="box flex">
  <div class="a">A</div>
  <div class="b-c flex column">
    <div class="b">B</div>
    <div class="c"></div>
  </div>
<div>

CSS

.box {
  display: flex;
  align-items: stretch;
  width: 100vw;
}
.a {
  flex: 0 0 150px;
}
.b-c {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
}