CSS中篇

#Flex布局#

1、什么是flex布局？

flex 布局，全称弹性布局（Flexible Box Layout），是 CSS3 中引入的一种新的布局模式。它主要通过给容器设置相关属性，来控制容器内部子元素的排列方式。相比传统的浮动布局和定位布局，flex 布局更加灵活、直观，尤其适合响应式设计。

简单来说，使用 flex 布局时，我们会有一个 “容器”，容器里面的元素被称为 “项目”。容器就像一个弹性的盒子，项目会根据容器的设置，以弹性的方式进行排列。

2、如何开启 flex 布局？

开启 flex 布局非常简单，只需要给容器添加display: flex;属性即可。例如：

.container {display: flex;
}

当容器设置为 flex 布局后，它的子元素（项目）就会自动成为 flex 项目，此时项目的 float、clear 和 vertical-align 属性将失效。

3、flex 布局的核心概念

主轴：flex 项目默认沿着主轴排列。主轴的方向可以是水平的（默认，从左到右），也可以通过属性修改为垂直的（从上到下）等。

交叉轴：与主轴垂直的轴就是交叉轴。主轴方向变化时，交叉轴方向也会相应变化。

4、容器的主要属性

容器上有很多重要的属性，通过设置这些属性，可以改变项目的排列方式。

1、flex-direction：决定主轴的方向

row（默认）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

2、justify-content：定义项目在主轴上的对齐方式

flex-start（默认）：左对齐。

flex-end：右对齐。

center：居中。

space-between：两端对齐，项目之间的间隔相等。

space-around：每个项目两侧的间隔相等，所以项目之间的间隔比项目与容器边框的间隔大一倍。

3、align-items：定义项目在交叉轴上的对齐方式

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

baseline：项目的第一行文字的基线对齐。

stretch（默认）：如果项目未设置高度或设为 auto，将占满整个容器的高度。

4、flex-wrap：定义项目是否换行

nowrap（默认）：不换行，项目会压缩宽度以适应容器。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

5、align-content：定义多根轴线的对齐方式（如果项目只有一根轴线，该属性不起作用）

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔相等，所以轴线之间的间隔比轴线与容器边框的间隔大一倍。

stretch（默认）：轴线占满整个交叉轴。

5、项目的主要属性

除了容器的属性，项目也有一些常用的属性，可以单独控制某个项目的表现。

1、flex-grow：定义项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。当所有项目的 flex-grow 属性都为 1 时，它们将等分剩余空间；如果其中一个项目的 flex-grow 属性为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。

2、flex-shrink：定义项目的缩小比例，默认为 1，即如果空间不足，项目将缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。

3、flex-basis：定义在分配多余空间之前，项目占据的主轴空间。默认值为 auto，即项目的本来大小。

4、flex：是 flex-grow、flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。该属性有两个快捷值：auto（1 1 auto）和 none（0 0 auto）。

5、align-self：允许单个项目有与其他项目不同的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch。其取值与 align-items 类似。

6、order：定义项目的排列顺序。数值越小，排列越靠前，默认为 0。

6、注意事项

当容器设置为 flex 布局后，子元素的 float、clear 和 vertical-align 属性失效。

flex 布局是单向的，要么沿主轴排列，要么沿交叉轴排列，不能同时在两个方向上进行复杂的排列。

在使用 flex-wrap: wrap 时，要注意项目的宽度设置，避免出现意想不到的换行效果。

#Grid布局#

1、Grid布局是什么？

grid 布局，即网格布局，是 CSS 中另一种强大的布局模式。它与 flex 布局不同，flex 布局主要处理一维布局（要么是行，要么是列），而 grid 布局则是专门为二维布局（同时处理行和列）设计的。

可以把 grid 布局想象成一张表格，有行和列，行和列交叉形成的区域就是单元格，我们可以把元素放在这些单元格中，还能让元素跨多行或多列。

2、如何开启 grid 布局？

开启 grid 布局也很简单，给容器添加display: grid;属性就行。例如：

.container {display: grid;
}

当容器设置为 grid 布局后，它内部的子元素就成为了 grid 项目。

3、grid 布局的核心概念

要理解 grid 布局，需要先清楚这些核心概念：

容器：设置了display: grid;的元素，是所有项目的父元素。

项目：容器内部的子元素。

行和列：容器被划分成若干水平的行和垂直的列。

行间距和列间距：行与行之间的距离叫行间距，列与列之间的距离叫列间距。

单元格：行和列交叉形成的最小单位。

网格线：划分行和列的线，水平的是行网格线，垂直的是列网格线。

4、容器的主要属性

（1）、grid-template-columns 和 grid-template-rows：定义列的宽度和行的高度，可以直接指定具体的长度，也可以使用 fr 单位（表示剩余空间的等分比例）。

.container {display: grid;grid-template-columns: 100px 1fr 2fr; /* 三列，第一列宽100px，第二列占1份剩余空间，第三列占2份 */grid-template-rows: 50px 100px; /* 两行，第一行高50px，第二行高100px */
}

还可以使用repeat()函数简化重复的值，比如grid-template-columns: repeat(3, 100px);表示三列，每列宽 100px。

（2）、grid-row-gap 和 grid-column-gap：设置行间距和列间距，也可以用grid-gap简写（grid-gap: 行间距列间距;）。

.container {grid-row-gap: 10px;grid-column-gap: 20px;/* 等同于 grid-gap: 10px 20px; */
}

在较新的 CSS 标准中，这些属性的前缀grid-可以省略，直接写row-gap、column-gap、gap。

（3）、grid-template-areas：定义网格区域。先给项目指定grid-area属性命名，然后在容器中用grid-template-areas来规划区域。

.container {grid-template-areas:"header header header""sidebar main main""footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

这样就定义了一个三行三列的网格，第一行是 header 区域，第二行左侧是 sidebar 区域，右侧是 main 区域，第三行是 footer 区域。

（4）、justify-items：设置项目在单元格中水平方向的对齐方式。取值有start（左对齐）、end（右对齐）、center（居中）、stretch（拉伸，占满单元格宽度，默认值）。

（5）、align-items：设置项目在单元格中垂直方向的对齐方式。取值有start（上对齐）、end（下对齐）、center（居中）、stretch（拉伸，占满单元格高度，默认值）。

（6）、justify-content：当网格总宽度小于容器宽度时，设置网格在容器水平方向的对齐方式。取值有start、end、center、space-around（网格两侧间距相等，网格之间间距是两侧的两倍）、space-between（网格之间间距相等，两侧没有间距）、space-evenly（网格之间和两侧的间距都相等）。

（7）、align-content：当网格总高度小于容器高度时，设置网格在容器垂直方向的对齐方式。取值与justify-content类似。

5、项目的主要属性

项目也有一些属性来控制自身的位置和大小：

1、grid-column-start 和 grid-column-end：设置项目所占列的起始和结束位置（基于列网格线）

例如，grid-column-start: 1; grid-column-end: 3;表示项目从第 1 根列网格线开始，到第 3 根列网格线结束，也就是跨 2 列。可以简写为grid-column: 1 / 3;。

2、grid-row-start 和 grid-row-end：设置项目所占行的起始和结束位置（基于行网格线）

类似列的设置，简写为grid-row: 1 / 3;，表示项目跨 2 行。

3、grid-area：有两个作用，一是给项目命名（配合容器的grid-template-areas使用），二是直接指定项目的位置，是grid-row-start、grid-row-end、grid-column-start、grid-column-end的简写，格式为grid-area: 行起始 / 列起始 / 行结束 / 列结束;。

4、justify-self：设置单个项目在单元格水平方向的对齐方式，可覆盖容器的justify-items属性，取值与justify-items相同。

5、align-self：设置单个项目在单元格垂直方向的对齐方式，可覆盖容器的align-items属性，取值与align-items相同。