CSS——CSS Grid 与 Flexbox 布局精要

10. CSS Grid 与 Flexbox 布局精要

现代 CSS 布局的核心是掌握 Grid 和 Flexbox 的特点和适用场景。

重点难点：

1. Grid vs Flexbox 选择：一维布局 vs 二维布局的应用场景
2. 网格线和网格区域：explicit 和 implicit grid 的理解
3. 对齐和分布：justify-* 和 align-* 系列属性的使用

/* CSS Grid 二维布局示例 */.dashboard{display:grid;grid-template-columns:200px 1fr 1fr;grid-template-rows:60px 1fr 60px;grid-template-areas:"header header header""sidebar main aside""footer footer footer";height:100vh;gap:10px;}.header{grid-area:header;}.sidebar{grid-area:sidebar;}.main{grid-area:main;}.aside{grid-area:aside;}.footer{grid-area:footer;}/* Flexbox 一维布局示例 */.navigation{display:flex;justify-content:space-between;/* 主轴对齐 */align-items:center;/* 交叉轴对齐 */flex-wrap:wrap;/* 换行 */}.nav-item{flex:1 1 auto;/* grow shrink basis */min-width:120px;}