elementui流式布局
时间: 2023-10-30 15:07:00 浏览: 53
ElementUI提供了两种流式布局方式:响应式布局和断点布局。
响应式布局是指根据屏幕宽度自动调整布局,可以通过设置`el-row`组件的`type`属性为`flex`来实现。例如:
```html
<template>
<el-row :gutter="20" type="flex">
<el-col :span="12">1</el-col>
<el-col :span="12">2</el-col>
</el-row>
</template>
```
断点布局是指根据屏幕宽度手动设置不同的断点,当屏幕宽度达到某个断点时,布局会发生变化。可以通过设置`el-row`组件的`breakpoint`属性来实现。例如:
```html
<template>
<el-row :gutter="20" :breakpoint="{xxl: 1600, xl: 1200, lg: 992, md: 768, sm: 576, xs: 0}">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">1</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">2</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">3</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" :xxl="3">4</el-col>
</el-row>
</template>
```