Element-ui中Row和Col组件如何实现布局？

本文共计1726个文字，预计阅读时间需要7分钟。

目录- 基本说明及用法- Row组件分析- render函数- 源码分析- Col组件分析- 组件分析- 响应式布局- 实际开发中遇到布局时，会用到Layout布局，这个布局只需配置一些参数即可。

目录

• 基本说明以及用法
• Row组件的分析
• render函数
• 源码分析
• Col组件的分析
• 组件分析
• 响应式布局

我们在实际开发中遇到一些布局的时候会用到Layout布局，这个布局只要配置一些参数就能够达到很好的布局效果甚至可以响应式，那里面的具体是怎么实现的呢，让我们去剖开Element-UI的源码，学习里面的一些细节吧。

基本说明以及用法

Element-UI的Layout布局是通过基础的24分栏，迅速简便地创建布局。根据不同的组合，很快的就能够生成一个很美观的响应式布局。具体的用法如下：

<el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row>

由上述的示例代码可以看出Row组件主要是创建每行分栏的布局方式，比如之间的一些间隔、对齐方式等。而Col则创建每个分栏，分栏的长度、偏移量等。