Flexbox 如何将子元素垂直居中并使其自己和容器等高？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要对元素进行垂直居中的操作，而 Flexbox（弹性盒子布局）成为了解决这个问题的最佳方案之一。本文将介绍如何使用 Flexbox 将子元素垂直居中并使其自己和容器等高。

什么是 Flexbox？

Flexbox 是一种 CSS 布局模式，它提供了一种更加灵活的方式来排列、对齐和分配元素的空间。使用 Flexbox，我们可以轻松地实现响应式布局，并且不需要使用传统的浮动和定位方式。

如何使用 Flexbox 将子元素垂直居中？

要将子元素垂直居中，我们需要在容器上应用 Flexbox 布局，并设置 align-items: center 属性。这个属性将会使所有的子元素垂直居中。

.container {
  display: flex;
  align-items: center;
}

接下来，我们需要让子元素自己和容器等高。为了实现这个目标，我们可以使用 flex-grow 属性。这个属性控制了子元素在容器中的分配比例。如果我们将 flex-grow 属性设置为 1，那么子元素将会扩展以填充剩余的空间，并且自己和容器等高。

.container {
  display: flex;
  align-items: center;
}

.child {
  flex-grow: 1;
}

这时候，我们会发现子元素已经垂直居中并且自己和容器等高了。

示例代码

下面是一个完整的示例代码，展示了如何使用 Flexbox 将子元素垂直居中并使其自己和容器等高。

<div class="container">
  <div class="child">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>

// javascriptcn.com 代码示例
.container {
  display: flex;
  align-items: center;
  height: 300px;
  border: 1px solid #ccc;
}

.child {
  flex-grow: 1;
  background-color: #f2f2f2;
  padding: 20px;
}

总结

使用 Flexbox 将子元素垂直居中并使其自己和容器等高非常简单，只需要设置 align-items: center 和 flex-grow: 1 属性即可。使用这种方式可以避免使用传统的浮动和定位方式，让我们的代码更加简洁、易维护。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b48547d4982a6eb59f6f3