html利用flex在竖线上

可以使用CSS的Flex布局来实现在竖线上的排列。首先要设置一个父容器，然后将其设置为Flex布局，再设置其子元素为Flex项目。接下来，我们可以使用`flex-direction`属性来设置Flex主轴的方向，可以选择`row`表示横向排列，也可以选择`column`表示竖向排列。如果选择竖向排列，则可以使用`flex-wrap`属性来设置Flex项目是否换行。最后，我们可以使用`border`属性来添加竖线。

例如，下面的代码演示了如何使用Flex布局在竖线上排列元素：

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

<style>
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.item {
  border-left: 1px solid #000;
  padding: 10px;
}
</style>

这段代码会将三个子元素在竖线上排列，并且在每个子元素的左侧添加一条竖线。你可以根据自己的需求修改样式。