03CSS 布局：只需要 Flex 和 Grid

CSS 里值得先学的只有布局，而布局只需要两个工具。

Flex：一维排列

一行或一列里排东西，永远用 flex：

.nav {
  display: flex;
  align-items: center;      /* 交叉轴居中 */
  justify-content: space-between; /* 主轴两端对齐 */
  gap: 24px;                /* 项目间距，别再用 margin 凑 */
}

记三个属性就够：justify-content（主轴对齐）、align-items（交叉轴对齐）、gap（间距）。

Grid：二维网格

行列都有规律时用 grid：

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

三列等宽，一行写完。响应式版本：

grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

容器够宽自动多列，不够自动折行，不用写媒体查询。

练习

• 用 flex 写一个导航栏：左 logo，右三个链接
• 用 grid 写一个卡片列表，桌面三列、手机自动变单列

下一课讲 JavaScript 基础——只讲写业务真正用得上的部分。