Flexbox（弹性盒子）是 CSS 最强大的布局工具之一，专门解决一维（一行或一列）的布局问题。掌握它，绝大多数布局难题迎刃而解。

一、核心概念

Flex 布局分两层：

二、容器属性

.container {
  display: flex;
  flex-direction: row;       /* 主轴方向：row|column */
  justify-content: center;   /* 主轴对齐 */
  align-items: center;       /* 交叉轴对齐 */
  flex-wrap: wrap;           /* 换行 */
  gap: 16px;                 /* 间距 */
}

三、项目属性

.item {
  flex: 1;            /* 简写：grow shrink basis */
  flex-grow: 2;       /* 放大比例 */
  align-self: flex-end;/* 单独对齐 */
  order: -1;          /* 排序 */
}

四、经典布局：水平垂直居中

以前最头疼的居中，Flex 三行搞定：

.parent {
  display: flex;
  justify-content: center;   /* 水平居中 */
  align-items: center;        /* 垂直居中 */
}
flex: 1 是最常用的简写，等价于 flex: 1 1 0%，表示项目等分剩余空间。多个项目都设 flex:1 就能均分宽度。

五、经典布局：导航栏两端对齐

.nav {
  display: flex;
  justify-content: space-between;   /* 两端对齐 */
}

六、经典布局：圣杯布局

三栏布局，中间自适应，两侧固定：

.layout { display: flex; }
.main { flex: 1; }     /* 中间占满剩余 */
.left, .right { width: 200px; }

七、小结

Flexbox 几乎能解决所有一维布局。先用它处理大多数场景，二维布局（行列同时控制）再考虑 Grid。两者配合，CSS 布局不再困难。