elementui使用Layout布局-对齐方式

标题适用场景：页面一些组件需要弹性布局，左右两侧，或者其他灵活展示对齐方式的，可以使用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-button
       type="primary"
       icon="el-icon-search"
       size="small"
       @click="handleSearch()" >查 询</el-button>
     <el-button
       type="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>