CSS 如何在 flex 容器中填充剩余的高度或宽度

在本文中，我们将介绍如何使用 CSS 在 flex 容器中填充剩余的高度或宽度。flex 布局是一种强大的布局模型，它可以在容器中自动调整元素的尺寸和位置。然而，有时候我们需要让某个元素占据容器中剩余的空间，这就需要用到特定的 CSS 技巧。

阅读更多：CSS 教程

填充剩余的高度

有时候，我们希望在一个纵向的 flex 容器中，让某个元素占据剩余的高度。可以通过设置元素的 flex 属性为 1 来实现这个效果。例如：

.container {
  display: flex;
  flex-direction: column;
  height: 400px;
}

.item {
  flex: 1;
}

在上面的示例中，.container 是一个纵向的 flex 容器，设置了固定的高度为 400px。.item 元素的 flex 属性被设为 1，这样它就会占据容器中剩余的高度。

填充剩余的宽度

类似地，我们也可以在一个横向的 flex 容器中，让某个元素占据剩余的宽度。可以通过设置元素的 flex 属性为 1 来实现这个效果。例如：

.container {
  display: flex;
  width: 800px;
}

.item {
  flex: 1;
}

在上面的示例中，.container 是一个横向的 flex 容器，设置了固定的宽度为 800px。.item 元素的 flex 属性被设为 1，这样它就会占据容器中剩余的宽度。

通过 margin:auto 实现填充剩余的空间

除了使用 flex 属性，我们还可以通过设置元素的 margin 属性来实现填充剩余的空间。这种方法更适用于某个元素在 flex 容器中水平和垂直都需要填充的情况。例如：

.container {
  display: flex;
  height: 400px;
}

.item {
  margin: auto;
}

在上面的示例中，.container 是一个纵向的 flex 容器，设置了固定的高度为 400px。.item 元素的 margin 属性被设为 auto，这样它就会在容器中水平和垂直都居中，并填充剩余的空间。

通过 align-self 和 justify-self 设置元素的对齐方式

如果我们希望在 flex 容器中让某个元素占据剩余的空间，并且额外控制它的对齐方式，可以使用 align-self 和 justify-self 属性。align-self 控制元素的垂直对齐方式，而 justify-self 控制元素的水平对齐方式。例如：

.container {
  display: flex;
  height: 400px;
}

.item {
  align-self: stretch;
  justify-self: center;
}

在上面的示例中，.container 是一个纵向的 flex 容器，设置了固定的高度为 400px。.item 元素的 align-self 属性被设为 stretch，这样它就会占据容器中剩余的高度，并且垂直居中对齐。同时，justify-self 属性被设为 center，这样它就会水平居中对齐。

总结

在本文中，我们介绍了如何使用 CSS 在 flex 容器中填充剩余的高度或宽度。通过设置元素的 flex 属性为 1，我们可以让某个元素占据容器中剩余的空间。除此之外，我们还可以通过设置元素的 margin 属性来实现填充剩余的空间，并且使用 align-self 和 justify-self 属性来控制元素的对齐方式。这些 CSS 技巧可以帮助我们更好地控制 flex 布局中的元素位置和尺寸，提升网页的布局效果。