Using the <lightning-layout> Grid System - 175

DEX602 - Unit 2 Introducing Lightning Web Components

📄 第 175 页 🎬 视频课程

课程章节介绍

让我们来聊聊Salesforce中的网格系统。这个系统其实很简单,它主要由两部分组成:一个是网格的容器,我们叫它;另一个是放在这个容器里的列,我们叫它。 首先,我们来看看水平对齐这个属性。这个属性可以让你决定这些列在容器里怎么水平排列。有几种选择: 1. ,空格(space),:这个选项会让列在容器里均匀分布,前后都有空格。想象一下,就像你在桌子上均匀地摆放几本书,每本书之间都有一定的距离。 2. ,居中(center),:这个选项会把所有的列都挤在一起,然后整体放在容器的中间。就像你把所有的书都堆在一起,然后放在桌子的正中间。 3. ,扩展(spread),:这个选项会让列在容器里均匀分布,但前后没有空格。就像你把书从桌子的一边摆到另一边,没有多余的空间。 4. ,靠右(end),:这个选项会把所有的列都挤在一起,然后放在容器的右边。就像你把所有的书都堆在一起,然后放在桌子的右边。 接下来,我们来看看灵活性这个属性。这个属性决定了列在容器里怎么随着空间的变化而变化。有几种选择: 1. ,增长(grow),:这个选项会让列随着空间的增加而均匀地变宽。就像你的书桌变大了,每本书都相应地变宽了。 2. ,自动(auto),:这个选项会让列在空间允许的情况下均匀地变大或变小。就像你的书桌大小在变化,每本书都自动调整宽度。 3. ,收缩(shrink),:这个选项会让列随着空间的减少而均匀地变窄。就像你的书桌变小了,每本书都相应地变窄了。 4. ,不收缩(no-shrink),:这个选项会让列不会随着空间的减少而变窄。就像你的书桌变小了,但每本书的宽度保持不变。 5. ,不增长(no-grow),:这个选项会让列不会随着空间的增加而变宽。就像你的书桌变大了,但每本书的宽度保持不变。 6. ,不灵活(none),:这个选项会让列不会随着空间的变化而变大或变小。就像你的书桌大小在变化,但每本书的宽度始终保持不变。 希望这些解释能帮助你更好地理解网格系统的工作原理。如果有任何问题,随时问我哦!