当前位置：首页 > news >正文

elementui使用Layout布局-对齐方式

news 2025/6/13 10:11:06

标题适用场景：页面一些组件需要弹性布局，左右两侧，或者其他灵活展示对齐方式的，可以使用`Layout`中`flex`

写法：`type="flex" class="row-bg" justify="center"`

我在项目中使用是两侧靠边对齐方式,代码展示如下

<el-row type="flex" justify="space-between"><el-col :span="8"><el-form-item label="姓名:" prop="name" label-width="100px"><el-input v-model="searchParam.name" placeholder="请输入" clearable/></el-form-item></el-col><div><el-buttontype="primary"icon="el-icon-search"size="small"@click="handleSearch()" >查 询</el-button><el-buttontype="primary"icon="el-icon-refresh-left"size="small"@click="handleReset()">重 置</el-button></div></el-row>

效果展示如下：
在这里插入图片描述

标题官方还有其他对齐方式

将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。<el-row type="flex" class="row-bg"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="center"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="end"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-between"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row type="flex" class="row-bg" justify="space-around"><el-col :span="6"><div class="grid-content bg-purple"></div></el-col><el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col><el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
</el-row>