element ui el-row,element row
本文主要介绍了Elementel-rowell-col布局组件的使用，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
:
目录
1.背景2。列布局3。列间距4。列偏移量4。对齐5。响应式布局6。总结。
1. 背景
元件的布局与自举原理相同。将网页分成若干行，然后将每一行平均分成若干列。基于这种方式，布局成为栅栏布局。
不同的是，element可以将每行分为24列，而bootstrap分为12列。从使用的角度来说，24列更为精细。
2. 分栏布局
首先用el-row标签标识每一行，然后用El-col标识每一行中的列，至于每一列与整行的宽度比，用：span属性来设置。
代码如下，即1行被等分为2列。为了便于区分列，我们为列添加了不同的样式。另外注意el-divider/el-divider是分割线，这里用来区分不同的例子。
模板
差异
每行24列的Span布局/span
el-row
El-col:span= 12 class= light green-box 示例1/el-col
El-col:span= 12 class= orange-box 示例1/el-col
/el-row
el分配器/el分配器
/div
/模板
样式范围。浅绿色框{
背景色：浅绿色；
高度：24px
}。橙色盒子{
背景色：橙色；
高度：24px
}
/风格
效果如下：
3. 分栏间隔
有时，如果您想要在不同的列之间设置特定的间隔，您可以使用el-row标记的：gutter属性。请注意，默认间隔是0。
在这一点上，需要注意的是，下面的写法，间隔，是无效的。
无效的span列间隔/span
el-row :gutter=50
El-col: span= 8 class=浅绿色框示例2/el-col
El-col:span= 8 class= orange-box 示例2/el-col
El-col: span= 8 class=浅绿色框示例2/el-col
/el-row
el分配器/el分配器
你需要在列中添加新元素来实现列间距。代码更改如下，以使间距有效。
Span列间隔有效/span
el-row :gutter=24
el-col :span=8
Class= lightgreen-box 示例3/div
/el-col
el-col :span=8
Class= orange-box 示例3/div
/el-col
el-col :span=8
Class= lightgreen-box 示例3/div
/el-col
/el-row
el分配器/el分配器
以上两个示例具有以下效果：
4. 分栏偏移
有时我们希望一列直接显示在中间或右侧，而不是左侧，比如右侧导航栏。我们希望它在右边，占据页面宽度的1/3。此时可以通过offset属性来实现，表示偏移量。
此时，如果要占据宽度的1/3，那么：span应该是8，offset应该是24-8=16，所以代码如下：
Span列偏移量/span
el-row
el-col :span=8 :offset=16
Class= lightgreen-box 示例4/div
/el-col
/el-row
el分配器/el分配器
效果如下：
4. 对齐方式
如果希望整行左对齐、中对齐和右对齐，可以直接设置el-row的对齐方式。
此时，您需要设置type=flex 来启用对齐，然后通过justify属性设置特定的对齐方式。例如，下面的示例实现了中心对齐。
跨度对齐/跨度
El-row type= flex justify= center
el-col :span=12
Class= lightgreen-box 示例5/div
/el-col
/el-row
el分配器/el分配器
5. 响应式布局
元素bootstrap的响应式布局原理和元素Bootstrap一样，都是通过设置不同分辨率的列的占用宽度比来实现的。
比如我们想认识到，在更大的分辨率下(电脑)，每列占据1/4的屏幕宽度，而在更小的宽度下(手机)，每列占据整个屏幕宽度。
这样就可以在手机上完整的显示内容，可以使用下面的代码：
Span响应布局/span
el-row
El-col: LG= 6: xs= 24 class=浅绿色框示例6/el-col
El-col:LG= 6 :xs= 24 class= orange-box 示例6/el-col
El-col: LG= 6: xs= 24 class=浅绿色框示例6/el-col
El-col:LG= 6 :xs= 24 class= orange-box 示例6/el-col
/el-row
对计算机的影响如下：
对手机的影响如下：
注意具体的尺寸属性为：
使用说明xs width 768 pxm=768 pxmd=992 pxlg=1200 pxl=1920 px
6. 小结
元件的布局与自举原理相同，使用方便。其实不需要记住所有的具体参数，只要知道用法，使用的时候去官网查询就可以了。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。