弹性布局 · Flexbox
英文：Flexbox
页面布局难度：入门 ★
🗣️一句话大白话
让一组元素沿一个主要方向排列，适合一行或一列的对齐、间距与顺序。让一组元素沿一个主要方向排列，最适合处理一行或一列中的对齐、间距和顺序。它常出现在导航栏、按钮组和卡片内部。
🎬真实场景
顶部导航、工具栏、按钮组、标签、头像与文字组合、卡片内部
📮你可以这样说
「Punk 网站的顶部导航使用 Flexbox，左侧显示 Punk Logo，右侧显示 Work、About、Writing、Contact 和主题切换按钮； 使用 justify-content: space-between 和 align-items: center， 小屏幕时隐藏文字导航并显示 Hamburger Menu。」
通过 AI绘图 工作台生成（模型 API 额度由此消耗）；未配置模型密钥时会提示失败原因。
⚠️边界与常见误解
- ▸误解：Flexbox 能做所有布局。实际它只处理一维方向，复杂二维用 CSS Grid
🚫什么时候别用
- ✗需要行列同时控制的复杂二维页面
🧩常见变体
导航栏按钮组卡片内部对齐
🕸️知识关系图
这个词条与相关术语、AI绘图 知识的连接关系