无需登录 数据私有 本地保存

Flexbox属性速查 - 可视对照表

前端设计 参考工具 Flexbox 属性 速查
66
0
0
0

Flexbox 属性速查 · 可视对照表

交互式演示 CSS Flexbox 所有核心属性，点击切换实时查看效果。选中子项可单独调整其属性。

快捷预设：
1
2
3
4
5
6
7
主轴：水平 → 交叉轴：垂直 ↓ 换行：wrap
flex-direction 主轴方向
flex-wrap 换行方式
justify-content 主轴对齐
align-items 交叉轴对齐（单行）
align-content 交叉轴对齐（多行）
gap 子项间距
10px
请先在演示区点击选中一个子项
然后在此调整其属性

常见问题 & 知识点

什么是 Flexbox？它解决了什么问题？
Flexbox（Flexible Box Layout）是 CSS3 引入的一种一维布局模型，旨在提供更高效的方式来排列、对齐和分配容器内子元素的空间，即使子元素尺寸未知或动态变化。它解决了传统布局（如浮动、定位）在垂直居中、等间距分布、自适应排列等方面的痛点，是现代前端布局的基石之一。
主轴（main axis）和交叉轴（cross axis）有什么区别？
主轴由 flex-direction 决定：row（默认）时主轴为水平方向，column 时主轴为垂直方向。交叉轴始终垂直于主轴。justify-content 控制主轴对齐，align-items/align-content 控制交叉轴对齐。理解主轴和交叉轴是掌握 Flexbox 的关键。
justify-content 的 space-between / space-around / space-evenly 有何不同？
space-between：首尾子项贴边，中间均分剩余空间。
space-around：每个子项两侧间距相等（首尾子项到边缘的间距是子项之间的一半）。
space-evenly：所有间距完全相等，包括首尾到边缘。三者在视觉效果上有明显区别，可在上方演示中切换对比。
align-items 和 align-content 有什么区别？
align-items 针对单行内的子项在交叉轴上的对齐方式。align-content 仅当容器有多行（flex-wrap: wrap 且子项换行后）时生效，控制行与行之间在交叉轴上的分布。如果只有一行，align-content 不会产生任何效果。本工具默认开启 wrap 模式，方便观察两者区别。
flex-grow 和 flex-shrink 是如何计算的？
flex-grow（默认0）：当容器有剩余空间时，子项按 grow 比例分配额外空间。如三个子项分别设置 grow:1,2,1，则剩余空间被分为4份，中间子项获得2份。
flex-shrink（默认1）：当容器空间不足时，子项按 shrink 比例收缩。设为0表示不收缩。选中演示区子项可单独调整这两个属性查看效果。
如何用 Flexbox 实现完美的水平垂直居中？
仅需在容器上设置三行代码：display: flex; justify-content: center; align-items: center;。点击上方「完美居中」预设按钮即可看到效果。这是 Flexbox 最经典的用法之一，彻底解决了过去用绝对定位+负边距等方式实现居中的繁琐问题。
Flexbox 和 CSS Grid 如何选择？
Flexbox 是一维布局模型，适合处理单行或单列的排列（如导航栏、按钮组、卡片列表）。CSS Grid 是二维布局模型，适合同时控制行和列的复杂网格（如整页布局、仪表盘）。实际开发中两者常结合使用：外层用 Grid 划分页面区域，内层用 Flexbox 处理组件内部排列。
order 属性会影响屏幕阅读器的顺序吗？
不会。order 仅改变视觉上的渲染顺序，不会改变 DOM 结构或 HTML 源码顺序。屏幕阅读器和键盘导航仍然按照 DOM 顺序进行。因此，如果视觉顺序与 DOM 顺序差异较大，可能造成可访问性问题，建议谨慎使用 order 属性。
🔧 相关工具