📐
Flexbox 属性速查
CSS Flexbox 全部属性与取值速查表。
本地处理 · 不上传
加载工具中…
相关：flexbox · 弹性布局 · css · 属性 · 速查
Flexbox 属性速查列出容器与子项的全部属性及取值含义，含 flex 简写的展开规则。它是一维布局的标准方案。
使用步骤
- 先分清要设在容器上还是子项上
- 容器上定主轴方向与对齐方式
- 子项上定 flex 的伸缩与基准值
- 子项被压扁时检查 min-width 的默认值 auto
使用场景
- 查找 flex 属性的正确写法
- 理解 flex 简写的三个值
- 排查对齐不生效的问题
- 学习各属性的实际效果
小贴士
- justify-content 控制主轴、align-items 控制交叉轴。改了 flex-direction 后两者的方向会互换，这是最常见的混淆点。
- flex: 1 是 flex-grow:1、flex-shrink:1、flex-basis:0% 的简写。basis 为 0 意味着完全忽略内容宽度平分空间。
- flex-basis 优先于 width，设了 flex 之后再改 width 常常不生效，原因就在这里。
常见问题
为什么设了 width 不生效？
因为 flex-basis 的优先级高于 width。如果写了 flex: 1（basis 为 0），元素会平分空间而忽略 width。需要固定宽度应设 flex: 0 0 指定值，或直接用 flex-basis。
flex: 1 到底是什么意思？
它等于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%。效果是所有设了它的子项平分容器空间，与各自内容多少无关。若想按内容比例分配，应该用 flex: auto。
怎么做垂直居中？
容器设 display:flex、justify-content:center、align-items:center 三行即可。这是 Flexbox 最广为人知的用途，也确实是最简单可靠的居中方案。
Flexbox 属性速查是免费的吗？
是。本站所有工具完全免费，无需注册登录、无广告干扰，打开即用。
使用Flexbox 属性速查，我的数据安全吗？
安全。该工具在你的浏览器本地完成处理，输入内容不会上传到服务器，隐私更有保障。