elementui 垂直flex
时间: 2023-09-23 21:12:41 浏览: 48
ElementUI 提供了一种垂直布局的方法,使用 Flex 布局可以很方便地实现。以下是一个示例代码:
```html
<template>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</template>
<style scoped>
.container {
display: flex;
flex-direction: column; /* 设置垂直方向 */
}
.item {
margin-bottom: 10px; /* 设置项目之间的间距 */
}
</style>
```
在这个示例中,`container` 类是一个容器,使用 Flex 布局设置了垂直方向(`flex-direction: column`)。每个项目都是一个 `item` 类,通过设置 `margin-bottom` 来实现项目之间的间距。
你可以根据实际需求,将需要垂直排列的元素放在容器中,并设置相应的类名和样式。这样就可以实现垂直的 Flex 布局。