CSS Flexbox 布局入门：告别浮动，一个容器搞定对齐

还在用 float 和 margin 硬凑布局？Flexbox（弹性盒子）是现代 CSS 布局的起点：一个容器属性就能解决水平垂直居中、等分空间、自动换行这些经典难题。

一、两个角色要分清

Flexbox 只涉及两层：设置 display: flex 的是容器，它的直接子元素是项目。对齐类属性写在容器上，单个项目的特殊行为写在项目上。

二、容器上最常用的五个属性

.container {
  display: flex;
  justify-content: space-between; /* 主轴对齐 */
  align-items: center;            /* 交叉轴对齐 */
  gap: 16px;                      /* 项目间距 */
  flex-wrap: wrap;                /* 允许换行 */
}

最有名的"一行居中"就是组合技：justify-content: center + align-items: center。

三、项目上的 flex 属性

.item { flex: 1; }  /* 等分剩余空间 */
.sidebar { flex: 0 0 240px; }  /* 固定 240px 不伸缩 */

flex: 1 让项目平分剩余空间，侧边栏用固定宽度、主内容区用 flex: 1，经典的后台布局两行就写完。

四、避坑提醒

• flex-direction 决定主轴方向，column 时 justify-content 变成垂直方向，容易搞反；
• min-width: 0 是让子内容正常收缩省略的隐藏开关，文字溢出时先加它。

结语：把容器五个属性背熟，日常 90% 的布局需求都能覆盖。Grid 更适合二维布局，但 Flexbox 仍是一维排布的首选。