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的比例占满容器高度的效果。

相关问题

css flex布局不让子元素占满

你可以使用`flex-grow: 0;`或者`flex-shrink: 0;`来控制子元素不自动拉伸。这样子元素就不会占满父容器的剩余空间。另外，你还可以使用`flex-basis`属性来设置子元素的初始大小。以下是一个示例：

.container {
  display: flex;
}

.item {
  flex-grow: 0; /* 子元素不自动拉伸 */
  flex-shrink: 0; /* 子元素不自动收缩 */
}

在上面的示例中，`.container`是父容器，`.item`是子元素。通过设置`flex-grow: 0;`和`flex-shrink: 0;`，你可以控制子元素不占满父容器的剩余空间。

css flex: 2;,css3 flex 布局

CSS3 引入了弹性盒子布局 (Flexbox)，它是一种新的布局方式，可以更加灵活地控制元素在容器中的排列方式。在 Flexbox 中，通过设置容器的 display 属性为 flex 或 inline-flex，就可以启用弹性布局。在容器中，通过设置子元素的 flex 属性来控制子元素在容器中的占比比例。flex 属性的值可以是一个数字，表示占比比例，也可以是一个关键字，比如 auto、none、initial、inherit 等。其中，flex: 2; 表示该元素占据容器中的 2/3 的空间。