Flexbox（伸缩方向：列）：当一个孩子的宽度固定时，被包裹的孩子未正确放置

Question

我在flex-flow: column wrap中使用弹性框布局。我正在为flexbox容器设置一个高度。我想要实现的是让第一个子元素占据整个高度，以便下一个子元素将换行到下一列。在我的情况下，这些孩子将换行到下一个列，但是在他们的列和第一个孩子的列之间有很大的空间。我设置第一个孩子的宽度似乎在某种程度上影响了包裹孩子的位置。

这是我尝试实现的目标： 这是我遇到的问题：

这里是指向密码笔的链接：codepen

.flex {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  border: 1px solid red;
}

.child1 {
  background-color: green;
  flex: 1 0 100%;
  max-width: 100px;
}

.child2 {
  flex: 1 0 20px;
  background-color: yellow;
}

.child3 {
  flex: 1 0 20px;
  background-color: blue;
}

<div class="flex">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

Answer 1

我知道这是一个Flexbox问题，但我想将CSS Grid引入其中。它旨在处理x / y布局方向。尽管flexbox有时可以处理y部分，但通常难度更大/容易被入侵。

.grid {
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-rows: repeat(2, 1fr);
  height: 100px;
  border: 1px solid red;
}

.child1 {
  background-color: green;
  grid-row: 1/-1; /* Begin at 1 and go to the end */
}

.child2 {
  background-color: yellow;
}

.child3 {
  background-color: blue;
}

<div class="grid">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

Answer 2

您需要为元素设置显式宽度。缺省情况下，它们会自动拉伸。

如果您删除max-width，将得到以下内容。延伸元素的两个eqaul列。

.flex {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  border: 1px solid red;
}

.child1 {
  background-color: green;
  flex: 1 0 100%;
}

.child2 {
  flex: 1 0 20px;
  background-color: yellow;
}

.child3 {
  flex: 1 0 20px;
  background-color: blue;
}

<div class="flex">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

添加max-width只会限制其列中第一个元素的宽度

.flex {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  border: 1px solid red;
}

.child1 {
  background-color: green;
  flex: 1 0 100%;
  max-width:100px;
}

.child2 {
  flex: 1 0 20px;
  background-color: yellow;
}

.child3 {
  flex: 1 0 20px;
  background-color: blue;
}

<div class="flex">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

如果更改对齐方式，则会得到以下信息：

.flex {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  border: 1px solid red;
  align-items:flex-start;
}

.child1 {
  background-color: green;
  flex: 1 0 100%;
}

.child2 {
  flex: 1 0 20px;
  background-color: yellow;
}

.child3 {
  flex: 1 0 20px;
  background-color: blue;
}

<div class="flex">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>

您将看不到任何东西，因为我们删除了拉伸对齐方式，并且未定义宽度。

添加一些宽度以获得所需的结果：

.flex {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
  border: 1px solid red;
  align-items:flex-start;
}

.child1 {
  background-color: green;
  flex: 1 0 100%;
  width:20%;
}

.child2 {
  flex: 1 0 20px;
  background-color: yellow;
  width:80%;
}

.child3 {
  flex: 1 0 20px;
  background-color: blue;
  width:80%;
}

<div class="flex">
  <div class="child1"></div>
  <div class="child2"></div>
  <div class="child3"></div>
</div>