Flexbox 布局实战

Flexbox 是前端布局的基础能力之一。下面演示如何用 display: flex 让内容在容器中居中。

核心属性

• display: flex 启用弹性布局
• justify-content 控制主轴对齐
• align-items 控制交叉轴对齐
• gap 设置子项间距

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  gap: 12px;
}

交互演示

修改 justify-content 或 align-items，观察卡片排列变化：

实践建议

优先用 Flex 处理一维布局（行或列），二维复杂布局再考虑 Grid。