flex 布局怎么让 元素 竖直均匀间隔居中排列

Flex布局是CSS3引入的一种新的布局方式，它可以让元素在容器中按照指定的方向排列，可以很容易地实现元素的居中、对齐、等分布等。要使元素在Flex容器中竖直均匀间隔居中排列，你可以按照以下步骤设置：

1. 设置Flex容器的`display`属性为`flex`。
2. 使用`flex-direction`属性设置子元素排列的方向为垂直，例如`column`。
3. 设置`justify-content`属性为`space-between`来实现子元素之间以及容器边缘之间的均匀间隔。
4. 设置`align-items`属性为`center`来让子元素在交叉轴上居中对齐。

下面是一个简单的CSS样式示例：

.container {
    display: flex;          /* 启用flex布局 */
    flex-direction: column; /* 子元素垂直排列 */
    justify-content: space-between; /* 子元素之间以及容器边缘之间均匀间隔 */
    align-items: center;    /* 子元素在交叉轴上居中对齐 */
    height: 300px;          /* 容器高度 */
}

.item {
    width: 100%;            /* 每个子元素宽度填满容器宽度 */
    /* 其他样式 */
}

<div class="container">
    <div class="item">子元素1</div>
    <div class="item">子元素2</div>
    <div class="item">子元素3</div>
</div>

在上述代码中，`.container` 类定义了一个flex容器，并且通过`justify-content`和`align-items`属性实现了子元素的均匀间隔居中排列。