CSS Flexbox 布局实战：对齐、换行与自适应写法

做后台页面时，导航左右分离、卡片等高、表单同行几乎天天要写。用浮动处理既要清浮动又要手算宽度，内容一变长就换行错位。Flexbox 弹性布局把这些需求收敛成几个属性：display:flex 打开弹性容器，justify-content 与 align-items 控制两个方向的对齐，flex-wrap 决定是否换行。

一、容器与两条轴

1. 主轴与交叉轴

Flexbox 把容器的直接子元素叫作弹性项目，容器自身有一条主轴和一条与之垂直的交叉轴。默认 flex-direction:row 时主轴水平，改成 column 后两轴互换——纵向菜单里 justify-content 控制的是上下分布，不能照搬行布局的直觉。

2. display:flex 与 gap

.nav     { display: flex; gap: 16px; }              /* 主轴水平，项目间距 16px */
.sidebar { display: flex; flex-direction: column; } /* 主轴垂直，纵向菜单 */

gap 原生生效，不必再给子项写 margin-right 和 :last-child 去尾。

二、对齐属性的实际用法

1. justify-content 主轴对齐

写工具栏用 space-between 做两端分离，居中用 center，靠左用 flex-start。

.toolbar { display: flex; justify-content: space-between; } /* 两端对齐 */
.menu    { display: flex; justify-content: center; }        /* 整块居中 */

2. align-items 与 align-content

align-items 控制交叉轴对齐，默认值 stretch 会把项目拉到容器高度——等高卡片不用写 height，单行垂直居中改 center 即可。多行容器里 align-items 只作用于行内，行与行之间的分布交给 align-content。

.row { display: flex; align-items: center; } /* 单行垂直居中 */

三、自适应换行与常见坑

1. flex-wrap 与 flex 简写

flex-wrap 默认 nowrap 会挤压子项宽度；设成 wrap 后配合 flex 简写就能做自适应卡片列表。flex 是 grow、shrink、basis 的简写，flex:1 等价于 1 1 0%。

.grid       { display: flex; flex-wrap: wrap; gap: 12px; }
.grid .item { flex: 1 1 220px; }  /* 基准 220px，可涨可缩，装不下换行 */
.side       { flex: 0 0 240px; }  /* 固定 240px，不涨不缩 */
.main       { flex: 1 1 auto; min-width: 0; }

2. 长内容撑破容器

弹性项目的 min-width 默认是 auto，长英文串不断行会把容器顶宽，出现横向滚动条。给需要省略号的项目显式加 min-width:0，再配合 overflow:hidden，text-overflow 才会生效。

.ellipsis { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

3. 与 Grid 的分工

弹性布局面向一维排布。需要同时控制行列时 CSS Grid 更直接，两者按区块各取所长即可。

关键配置提示

• 容器用 gap 代替子项 margin，避免最后一行多出间距。
• 长文本子项必须设 min-width: 0，否则 text-overflow 不生效。
• 默认 align-items: stretch 已实现等高卡片，无需额外 height。