在前端开发过程中，我们常常会使用到Flexbox和Grid系统进行布局设计。其中，有一些CSS属性不仅可以用来控制布局的行为，还可以精确地控制元素的尺寸和分配方式。接下来，我们将对flex与grid-template-columns这两个属性进行一些深度解析。
一、探索Flexbox
当谈到 Flexbox 布局时，有一些重要的属性和概念需要了解。Flexbox 是一种用于创建灵活的、自适应的布局的 CSS 模块。下面是一些与 Flexbox 相关的关键属性和概念：
display: flex: 在父容器上设置此属性，将其转换为 Flexbox 容器。它使子元素成为 Flexbox 项目。
flex-direction: 定义 Flexbox 项目在主轴上的排列方式。可能的值包括：row（水平排列，默认值）、row-reverse（反向水平排列）、column（垂直排列）和 column-reverse（反向垂直排列）。
flex-wrap: 定义当 Flexbox 项目在容器中无法容纳时是否换行。可能的值包括：nowrap（不换行，默认值）、wrap（换行）和 wrap-reverse（反向换行）。
justify-content: 定义 Flexbox 项目在主轴上的对齐方式。它控制项目在主轴上的分布。可能的值包括：flex-start（起始对齐，默认值）、flex-end（结束对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目两侧间隔相等，项目之间间隔是两侧间隔的一半）和 space-evenly（项目间隔相等，包括首尾两侧）。
align-items: 定义 Flexbox 项目在交叉轴上的对齐方式。它控制项目在交叉轴上的分布。可能的值包括：stretch（拉伸以填满交叉轴，默认值）、flex-start（起始对齐）、flex-end（结束对齐）、center（居中对齐）和 baseline（基线对齐）。
align-content: 当存在多行或多列的 Flexbox 项目时，定义项目在交叉轴上的对齐方式。可能的值包括：stretch（拉伸以填满交叉轴，默认值）、flex-start（起始对齐）、flex-end（结束对齐）、center（居中对齐）、space-between（两端对齐，项目之间间隔相等）、space-around（项目两侧间隔相等，项目之间间隔是两侧间隔的一半）。
flex-grow: 定义 Flexbox 项目在剩余空间上增长的比例。默认值为 0，表示项目不增长。如果设置为正数，项目将按比例增长。
flex-shrink: 定义 Flexbox 项目在空间不足时缩小的比例。默认值为 1，表示项目将缩小以适应空间。如果设置为 0，则项目不会缩小。
flex-basis: 定义 Flexbox 项目在分配多余空间之前的初始大小。它可以是一个具体的长度值（如像素或百分比），也可以是关键字 auto（项目的原始大小）。
flex: 这是 flex-grow、flex-shrink 和 flex-basis 的简写属性。它的默认值为 0 1 auto，表示项目不增长、可缩小且大小为原始大小。
理解flex: 0 0 200px
当我们使用语句flex: 0 0 200px，实际上是在控制Flexbox项目的伸缩行为和尺寸分配。这是flex属性的简写形式，由三个独立的属性组成：flex-grow、flex-shrink和flex-basis。
flex-grow：此属性决定了项目在剩余空间中的放大比例。默认值为0，意味着在默认情况下，项目不会扩展以占用剩余空间。
flex-shrink：此属性决定了项目在空间不足时的缩小比例。默认值为1，这意味着项目在空间不足时将缩小以适应容器。
flex-basis：此属性决定了项目的初始大小。在这个例子中，200px表示项目的初始宽度为200像素。
因此，flex: 0 0 200px的意思是，Flexbox项目不会伸展或缩小，且其初始宽度为200像素。
二、探索Grid系统
当使用 CSS Grid 布局时，有一些相关的属性可用于控制网格布局的各个方面。以下是一些常用的 Grid 属性的详细说明：
display: grid：
作用：将容器元素转换为网格容器。
值：grid。
grid-template-columns：
作用：定义网格的列。
值：可以是长度值（如像素、百分比），也可以是关键字（如 auto、fr）的组合。
示例：grid-template-columns: 100px 1fr 2fr。
grid-template-rows：
作用：定义网格的行。
值：可以是长度值（如像素、百分比），也可以是关键字（如 auto、fr）的组合。
示例：grid-template-rows: 100px 1fr 2fr。
grid-gap（或 gap）：
作用：定义网格的行和列之间的间距。
值：可以是长度值（如像素、百分比）。
示例：grid-gap: 10px。
grid-column-start：
作用：定义网格项目的起始列。
值：可以是网格线的编号、关键字 span，或者具体的列号。
示例：grid-column-start: 2。
grid-column-end：
作用：定义网格项目的结束列。
值：可以是网格线的编号、关键字 span，或者具体的列号。
示例：grid-column-end: span 2。
grid-row-start：
作用：定义网格项目的起始行。
值：可以是网格线的编号、关键字 span，或者具体的行号。
示例：grid-row-start: 1。
grid-row-end：
作用：定义网格项目的结束行。
值：可以是网格线的编号、关键字 span，或者具体的行号。
示例：grid-row-end: span 3。
justify-items：
作用：定义在单元格中的内容在水平方向上的对齐方式。
值：start、end、center、stretch。
示例：justify-items: center。
align-items：
作用：定义在单元格中的内容在垂直方向上的对齐方式。
值：start、end、center、stretch。
示例：align-items: center。
justify-content：
作用：定义网格容器中所有网格项目在水平方向上的对齐方式。
值：start、end、center、stretch、space-between、space-around、space-evenly。
示例：justify-content: center。
align-content：
作用：定义网格容器中所有网格项目在垂直方向上的对齐方式。
值：start、end、center、stretch、space-between、space-around、space-evenly。
示例：align-content: center。
理解grid-template-columns: repeat(3, 1fr)
另一方面，grid-template-columns: repeat(3, 1fr)是一个在Grid容器中定义列的大小和数量的属性。这里使用了repeat()函数，它可以简化重复值的书写。
repeat(3, 1fr)表示“重复3次的1fr”。这里的1fr是一个特殊的单位，它表示剩余空间的分配比例。因此，grid-template-columns: repeat(3, 1fr)将创建一个包含3列的Grid布局，每列的宽度将平均分配剩余的空间。
此外grid-template-columns还有下面这几个用法
1、指定固定宽度的列：
grid-template-columns: 100px 200px 150px;上述代码将创建三个列，分别具有 100 像素、200 像素和 150 像素的固定宽度。
2、使用百分比指定列宽：
grid-template-columns: 25% 50% 25%;此示例将创建三个列，它们的宽度分别为容器宽度的 25%、50% 和 25%。
3、使用 fr 单位自动分配剩余空间：
grid-template-columns: 1fr 2fr 1fr;这将创建三个列，其中第一个和第三个列将平均分配剩余的可用空间，而第二个列将获得剩余空间的两倍宽度。
4、指定最小和最大宽度：
grid-template-columns: minmax(100px, auto) 200px minmax(150px, 1fr);上述代码中，第一个列的宽度将至少为 100 像素，但可以自动扩展以适应内容。第二列具有固定的 200 像素宽度。第三列的宽度将至少为 150 像素，但可以根据剩余空间自动扩展。
5、使用 repeat() 函数重复定义列：
grid-template-columns: repeat(3, 100px);这将创建三个宽度为 100 像素的列。
6、结合不同的值：
grid-template-columns: 1fr minmax(200px, 1fr) repeat(3, 100px);此示例中，第一个列将占据可用空间的剩余部分。第二列的宽度将至少为 200 像素，但可以根据剩余空间自动扩展。然后，接下来的三个列将具有固定的 100 像素宽度。
这些只是 grid-template-columns 属性的一些常见用法，您可以根据需要自由组合和调整这些值以满足您的布局需求。
以上就是全部内容，开通付费是希望督促自己每天更新一点知识，每天进步一点。
扫一扫
2867
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
