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

二号任务从灵活到精准——实现Flexbox与Grid布局汇报人：xxx时间：2026

任务说明01

本任务将介绍两种新的页面布局，并将其应用在社团管理网页中，具体完成以下操作：（1）将“部门职能”部分的section区域改为Grid布局，使不同的组职能简介更整齐地排成两列。Grid布局适合这类多维布局需求。（2）对社团管理网页侧边栏中的“最新志愿者活动”区域进行修改，采用Flexbox布局，以优化其显示效果。二号任务任务说明

知识准备02

01关于Flexbox布局目录关于Grid布局03Flexbox与Grid的混合使用02

1.关于Flexbox布局知识准备Flexbox：是Flexiblebox的缩写，作为CSS3的布局模式它决定了元素如何在页面上排列，使元素能在不同屏幕尺寸和设备下可预测地展现。其中，采用Flexbox布局的元素被称为flex容器，容器内部的元素则称为flex项目。它之所以被称为Flexbox，是因为它能够扩展和收缩flex容器内的元素，以最大限度地填充可用空间。与以前的布局方式（如表格布局和浮动元素内嵌块元素）相比，Flexbox布局更强大的方式，主要表现在以下几个方面。①在不同方向排列元素。②可重新排列元素的显示顺序。③能更改元素的对齐方式。④方便动态地将元素装入容器。

1.关于Flexbox布局知识准备Flexbox布局的常用属性属性