自适应屏幕flex垂直方向布局

对于垂直方向的自适应屏幕布局，可以使用flexbox布局来实现。在flex布局中，通过设置flex容器和flex项目的属性，可以实现垂直方向的自适应布局。

首先，创建一个具有垂直方向布局的flex容器，设置其display属性为flex，同时设置flex-direction属性为column。这将使得其中的项目按照垂直方向排列。

然后，对于flex容器中的项目，可以使用flex属性来设置它们的大小比例。通过调整不同项目的flex属性值，可以实现不同项目在垂直方向上的自适应布局。

以下是一个示例代码：

<style>
    .container {
        display: flex;
        flex-direction: column;
        height: 100vh; /* 设置容器高度为视窗高度 */
    }

    .item {
        flex: 1; /* 设置项目的大小比例，让它们平分垂直空间 */
    }
</style>

<div class="container">
    <div class="item">项目1</div>
    <div class="item">项目2</div>
    <div class="item">项目3</div>
</div>

这样，项目1、项目2和项目3会根据容器的高度平分垂直空间，并且随着视窗大小的变化而自适应调整。