VUE-Element组件（一）Layout布局

最新推荐文章于 2025-02-20 10:52:28 发布

w_t_y_y

最新推荐文章于 2025-02-20 10:52:28 发布

阅读量9.8k

点赞数 1

分类专栏： # VUE页面开发

本文链接：https://blog.youkuaiyun.com/w_t_y_y/article/details/110519608

版权

VUE页面开发专栏收录该内容

26 篇文章

订阅专栏

一、el-row和el-col可以很好的控制块级、行级布局，建议：在div中嵌套el-row。el-row和div

类似，div的很多css属性在el-row中都可以使用，el-col则不一定。

二、el-col之间的间距问题：

1、el-col之间设置间距有两种方法：

1）使用el-row自带的gutter：gutter生成的间距如果长度不够会外扩，如：

 <el-row>
                  <el-col :span="6" class="col">无间距第一个</el-col>
                  <el-col :span="6" class="col">无间距第二个</el-col>
                  <el-col :span="6" class="col">无间距第三个</el-col>
                  <el-col :span="6" class="col">无间距第四个</el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6" class="col">第一个</el-col>
                  <el-col :span="6" class="col">第二个</el-col>
                  <el-col :span="6" class="col">第三个</el-col>
                  <el-col :span="6" class="col">第四个</el-col>
                </el-row>



 .col {
            border: 1px solid black;
          }

2）css设置边距：而css生成的间距长度不够会换行，如：

 <el-row>
                  <el-col :span="6" class="col">无间距第一个</el-col>
                  <el-col :span="6" class="col">无间距第二个</el-col>
                  <el-col :span="6" class="col">无间距第三个</el-col>
                  <el-col :span="6" class="col">无间距第四个</el-col>
                </el-row>
               
                <el-row>
                  <el-col :span="6" class="col" style="margin-left:20px">第一个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第二个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第三个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第四个</el-col>
                </el-row>


 .col {
            border: 1px solid black;
          }

2、间距对齐方式：将 type 属性赋值为 'flex'，可以启用 flex 布局，并可通过 justify 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。

下面以space-between对齐方式为例：

1）gutter的间距：仍是超出：

 <el-row>
                  <el-col :span="6" class="col">无间距第一个</el-col>
                  <el-col :span="6" class="col">无间距第二个</el-col>
                  <el-col :span="6" class="col">无间距第三个</el-col>
                  <el-col :span="6" class="col">无间距第四个</el-col>
                </el-row>
                <el-row :gutter="20" type="flex" justify="space-between">
                  <el-col :span="6" class="col">第一个</el-col>
                  <el-col :span="6" class="col">第二个</el-col>
                  <el-col :span="6" class="col">第三个</el-col>
                  <el-col :span="6" class="col">第四个</el-col>
                </el-row>

2）css的间距：不换行了：

 <el-row type="flex" justify="space-between">
                  <el-col :span="6" class="col" style="margin-left:20px">第一个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第二个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第三个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第四个</el-col>
                </el-row>

再把第一个col的左间距去掉

 <el-row type="flex" justify="space-between">
                  <el-col :span="6" class="col">第一个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第二个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第三个</el-col>
                  <el-col :span="6" class="col" style="margin-left:20px">第四个</el-col>
                </el-row>