CSS中flex布局，如何利用flex: 1;让子元素1:3:1的比例占满容器高度

可以使用以下代码实现：

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.container > * {
  flex: 1;
}

.container > :nth-child(2) {
  flex: 3;
}

这里的关键是将容器的 `display` 属性设置为 `flex`，并将 `flex-direction` 属性设置为 `column`，这样子元素就会按照垂直方向排列。

然后，将每个子元素的 `flex` 属性都设置为 `1`，这样它们就会平均分配剩余的空间。

最后，将第二个子元素的 `flex` 属性设置为 `3`，这样它就会占据剩余空间的三分之一，而其他子元素则各占据剩余空间的一份。这样就可以实现子元素1:3:1的比例占满容器高度的效果。