掌握Flex和Grid布局可实现CSS动态宽高自适应；2. Flex通过flex:1实现子元素均分容器，适合横向布局；3. Grid利用auto-fit与minmax创建响应式卡片网格；4. 混合使用Grid划分区域、Flex处理内部排列，适用于复杂界面；5. 需测试多屏幕尺寸确保布局稳定性。
在CSS初级项目中实现动态宽高调整，关键在于掌握现代布局方式。Flex和Grid是目前最实用的两种布局模型，它们能让子元素自动适应容器变化，无需依赖固定尺寸或JavaScript干预。下面通过实际案例说明如何用Flex与Grid实现自适应效果。
使用Flex实现横向自适应布局
当需要多个子元素在同一行内均匀分布，并随容器宽度变化自动调整时，Flex是最直接的选择。
例如，构建一个导航栏，包含三个菜单项，希望它们等宽且填满父容器：
.container {
display: flex;
}
.item {
flex: 1;
margin: 0 5px;
}
这里flex: 1表示每个子元素平均分配剩余空间。即使容器宽度改变，三项始终均分可用区域。若某一项内容较长，可结合flex-shrink控制压缩比例，避免文字溢出。
立即学习“前端免费学习笔记（深入）”；
利用Grid创建响应式卡片网格
对于二维布局，如产品展示卡片，Grid更合适。它能轻松实现多列自动换行，且每行高度一致。
假设要显示多个卡片，每张宽度至少200px，多余空间自动扩展：
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
auto-fit会将符合条件的列自动填充容器，minmax(200px, 1fr)确保每列最小200px，最大为等分的弹性空间。浏览器窗口缩小时，列数自动减少，实现无缝响应。
结合Flex与Grid处理复杂嵌套结构
实际项目中常需混合使用两种布局。比如一个仪表盘界面：外层用Grid划分区域，内部模块用Flex排列按钮或文本。
示例：左侧窄栏、右侧主内容区，右侧内部水平排列操作按钮：
.dashboard {
display: grid;
grid-template-columns: 200px 1fr;
height: 100vh;
}
.toolbar {
display: flex;
gap: 8px;
justify-content: flex-end;
}
这种组合让整体结构清晰，同时局部元素保持灵活对齐和间距控制。
基本上就这些。掌握flex和grid的基本属性，理解auto-fit、minmax、flex: 1等核心用法，就能应对大多数自适应需求。不复杂但容易忽略的是测试不同屏幕尺寸下的表现，确保内容不会挤压或断裂。
