4-2 从灵活到精准-实现Flexbox与Grid布局

二号任务从灵活到精准——实现Flexbox与Grid布局汇报人：xxx时间：2026任务说明01本任务将介绍两种新的页面布局，并将其应用在社团管理网页中，具体完成以下操作：（1）将“部门职能”部分的<section>区域改为Grid布局，使不同的组职能简介更整齐地排成两列。Grid布局适合这类多维布局需求。（2）对社团管理网页侧边栏中的“最新志愿者活动”区域进行修改，采用Flexbox布局，以优化其显示效果。二号任务任务说明知识准备0201关于Flexbox布局目录关于Grid布局03Flexbox与Grid的混合使用021.关于Flexbox布局知识准备Flexbox：是Flexiblebox的缩写，作为CSS3的布局模式它决定了元素如何在页面上排列，使元素能在不同屏幕尺寸和设备下可预测地展现。其中，采用Flexbox布局的元素被称为flex容器，容器内部的元素则称为flex项目。它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。与以前的布局方式（如表格布局和浮动元素内嵌块元素）相比，Flexbox布局更强大的方式，主要表现在以下几个方面。①在不同方向排列元素。②可重新排列元素的显示顺序。③能更改元素的对齐方式。④方便动态地将元素装入容器。1.关于Flexbox布局知识准备Flexbox布局的常用属性属性值含义row默认值，主轴为水平方向（水平布局），起点在左端，从左往右排列row-reverse主轴为水平方向（水平布局），起点在右端，从右往左排列column主轴为垂直方向（垂直布局），起点在上沿，从上往下排列column-reverse主轴为垂直方向（垂直布局），起点在下沿，从下往上排列属性值含义nowrap默认值，表示不换行wrap换行wrap-reverse换行，第一行在下方布局方向flex-direction：用于定义主轴的方向，从而决定子元素的排列方向环绕效果flex-warp：控制子元素在主轴方向上是否换行，1.关于Flexbox布局知识准备Flexbox布局的常用属性属性值含义flex-start默认值，左对齐flex-end右对齐center居中space-between两端对齐，项目的间距相等space-around项目两侧的间距相同，项目的间距比两侧的间距大一倍属性值含义flex-start交叉轴的起点对齐flex-end交叉轴的终点对齐center交叉轴的中点对齐baseline项目的第一行文字的基线对齐sretch默认值，若项目未设置高度或设为auto，将占满整个容器的高度水平对齐方式justify-content：定义子元素在主轴（水平或垂直）方向上的对齐方式交叉轴对齐方式align-items：定义子元素在交叉轴方向上的对齐方式2.关于Grid布局知识准备Grid布局即网格布局。它就像一张规整的表格，把网页中的容器划分成“行”和“列”，这些行、列交叉形成一个个小格子，也就是单元格。我们可以像在表格里放置内容一样，指定网页元素（项目）放在哪个单元格里，所以它是一种二维布局方式。Grid布局的基本概念如下。①网格容器和项目：采用网格布局的区域称为“容器”（Container），容器内部采用网格定位的子元素称为“项目”（Item）。②网格轨道：一个网格轨道就是网格中任意两条线之间的空间。③网格线：Grid会为我们创建编号的网格线让我们来定位每一个网格元素。④网格单元：一个网格单元是一个网格元素最小的单位；一旦一个网格元素被定义在一个父级元素当中，那么他的子级元素将会排列在每个事先定义好的网格单元中。⑤网格区域：网格元素可以沿着行或列的方向扩展一个或多个单元，并且会创建一个网格区域。⑥网格间距：两个网格单元之间的网格横向间距或网格纵向间距。2.关于Grid布局知识准备4.文字排版与过渡效果3.Flexbox与Grid的混合使用知识准备Flexbox和Grid是CSS中两个强大的布局系统，它们有各自的优势和用途。在实际的网页设计中，我们可以根据布局需求混合使用它们，以达到最佳的布局效果。混合使用具备各自的优势如下。（1）Flexbox：适合于一维布局（单行或单列），以及需要在容器内部对项目进行对齐和分布的场景。（2）Grid：适合二维布局（行列），以及需要创建复杂页面结构的场景。在我们前面实现的页面布局中，包含头部、侧边栏、主要内容区和底部。主要内容区需要进一步细分为一个3列的网格布局，用于展示不同的内容模块。4.文字排版与过渡效果任务实现03任务实现（1）对社团管理网页侧边栏中的“最新志愿者活动”区域进行修改，采用Flexbox布局，以优化其显示效果。Flexbox布局非常适合处理一维结构的内容，能够实现元素的对齐、分配和排列，尤其在处理动态内容或需要自适应调整的情况下表现尤为出色。使用Flexbox可以提升页面布局的可维护性，同时增强用户界面的互动性和流畅度。任务实现（2）将“部门职能”部分的<section>区域调整为Grid布局，这样可以将不同组的职能简介更加整齐地排成两列。display:grid;：启用Grid布局，将.grid-container转换为网格容器。grid-template-columns:1fr1fr;：定义两列布局，两列占据相等的宽度。gap:20px;