el-row自动换好

el-row是element-ui中的一个组件，用于创建网格布局。当el-col元素在el-row内部排列时，el-row会自动根据el-col的宽度和数量进行换行。

在el-row中，可以使用属性offset来实现换行。当offset的值大于0时，el-col元素会在左侧留下一定的空间，导致换行效果。这样可以避免网格布局的不稳定和难看的问题。

此外，el-row还提供了属性justify来控制el-col元素的横向对齐方式。当el-row的横向空间还未被填满时，设置justify的值可以使el-col元素在el-row中水平居中、两端对齐或者等间距分布。

总结来说，通过设置offset和justify属性，el-row可以实现自动换行和横向对齐的效果，使网格布局更加灵活和美观。

相关问题

el-row el-col el-card

el-row、el-col和el-card是Element UI框架中常用的布局组件。

el-row是一个水平方向的布局容器，用于将页面分为一行一行的内容。它可以使用属性来设置间距，如gutter属性指定每个el-col之间的间距。

el-col是el-row中的列组件，用于将一行分为若干列。它可以使用属性来设置每列的宽度，如span属性指定每个el-col占据的栅格数。

el-card是一个卡片组件，用于展示相关的信息。可以包含标题、内容和其他自定义的插槽。可以通过设置body-style属性来修改卡片的尺寸和边距颜色。

使用el-row、el-col和el-card可以方便地实现灵活的页面布局和展示多个卡片。el-container布局则可以实现自动换行的功能。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [element-el-row-el-col使用布局，修改el-card边距＜el-card :body-style=“{padding:‘10px‘}“＞card1＜/...](https://blog.csdn.net/jieweiwujie/article/details/120378615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Element-UI 使用el-row 分栏布局的教程](https://download.csdn.net/download/weixin_38556822/14662196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

el-row el-col高度

根据引用的内容，grid-gap属性设置的元素间距是不包含在自动分配的空间里面的。因此，在使用grid布局时，按比例分配的宽度是按照width 100%而不是width - gap(n-1)。所以，如果要让宽度适应，应该在父元素接收到gap值后减去再分配。

根据引用的代码片段，你正在使用grid布局，设置了三行三列的元素，并且每个元素的宽度和高度都是33%，并且设置了grid-gap属性来定义元素之间的间距。在这种情况下，el-row和el-col的高度将根据父元素的高度自动调整，因为它们没有明确设置高度。所以，el-row和el-col的高度将根据父元素的高度和元素之间的间距进行自动分配。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* *2* [Grid布局实现el-row/el-col](https://blog.csdn.net/shwwns/article/details/110097035)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]